14

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 !

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jean-Philippe Murray
  • 1,208
  • 2
  • 12
  • 34

2 Answers2

46

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.

elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • So

    or

    can have "keyup" events?
     – Jean-Philippe Murray Mar 18 '12 at 21:05
  • The `keyup` event happens on `#aDropdownID`. I can't tell what that is without html.. – elclanrs Mar 18 '12 at 21:06
  • 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 `

    ` and it's the

    [...]

    that get repeated dynamically on demand.     – Jean-Philippe Murray Mar 18 '12 at 21:10
  • (Looking at that soon, will be back with the results!) – Jean-Philippe Murray Mar 18 '12 at 21:24
  • 1
    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 ? – Jean-Philippe Murray Mar 18 '12 at 21:34
  • 1
    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? – Jean-Philippe Murray Mar 19 '12 at 00:18
  • If you don't have a static parent element, then you can always use document. – toesslab Jul 19 '16 at 13:33
  • Perfect! I used the $('body') as the static element. – Jacob Jun 20 '17 at 16:03
14

This works for me: 

$(document).on('keyup', '#YourInputFieldId', function () {
    //stuff happens
});
Gilad Green
  • 36,708
  • 7
  • 61
  • 95
Mark Ryan Orosa
  • 847
  • 1
  • 6
  • 21