Bind on(keyup) to dynamic elements in jQuery (Twitter Bootstrap + typehead)

Question

I guess some of you must have frowned eyebrows reading this title eh ? I'm sure people asks this every time, yet, I haven't seen my particular question around so, I'm trying ! Binding events to dynamically created elements is my kryptonite, I just can't wrap my head around it ...

So ok, I'm using Twitter Boostrap, with the typehead() plugin. I'm using this trick to make it work with remote sources of data. At this point, everything work. I click on a text input in my form, tagged for it, and the scripts go load external sources and the drop down appears. But I have dynamic element creation, and you've figured, it just won't work on them. I was exploring the live() method, but looking at "how" the scripts is getting fired, I'm just not sure how I can implement it.

$('#anInputField').typeahead().on('keyup', function(ev){
 // stuff happens
});

Every time there is a keyup, the script fires a jSON request, checks his things, and gets the result back to typehead() who does the autocomplete part of the job. So how can I say to jQuery to look at #aDropdownID created after the initial binding? I went on and checked if I could use live(), but since on() replaces it... I'm clueless !

Any help appreciated !

Dark

Answer 1

For on() to be able to delegate you have to call it on a static element that you know is always going to be there and then you pass the dynamic element like:

$('#static-parent').on('keyup', '#aDropdownID', function(ev){
 // stuff happens
});

If you don't have a static parent element, then you can always use body.

Biracial

So <p> or <div> can have "keyup" events? – Dark

The keyup event happens on #aDropdownID. I can't tell what that is without html.. – Biracial

Not really clear on my part,true. Just edited the id name so it's more clever. Other then that, on the page itself, it looks like ` <div class="controls" id="idOne"><p><input name="one" type="text" data-provide="typeahead"> <input name="two"> <input name="three" type="text"></p></div>` and it's the <p>[...]</p> that get repeated dynamically on demand. – Dark

(Looking at that soon, will be back with the results!) – Dark

Nope, won't work. Curently, with the non dynamic element, it works like this: $('input[id^="autocomplete"]').typeahead().on('keyup', function(ev){ //doing things }); ... If I try to replace the selector with #idOne, even the not dymanic one is broken. I guess typehead (or keyup, for that matter) fires only on input elements ? – Dark

Okay, I searched up a little bit, it seems that the "keyup" event is triggered with only focusable elements (which are mainly input (and other form elements) and A elements ?). Seems that until I can wrap up the things in a A, it's a no go? – Dark

If you don't have a static parent element, then you can always use document. – Sensual

Perfect! I used the $('body') as the static element. – Crumpler

Answer 2

This works for me:

$(document).on('keyup', '#YourInputFieldId', function () {
    //stuff happens
});

Seppala