title: Bind on(keyup) to dynamic elements in jQuery (Twitter Bootstrap + typehead)
body: <p>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 ...</p>
  
  <p>So ok, I'm using Twitter Boostrap, with the <code>typehead()</code> plugin. I'm using <a href="https://gist.github.com/1848558" rel="nofollow noreferrer">this trick</a> 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 <code>live()</code> method, but looking at "how" the scripts is getting fired, I'm just not sure how I can implement it.</p>
  
  <pre><code>$('#anInputField').typeahead().on('keyup', function(ev){
   // stuff happens
  });
  </code></pre>
  
  <p>Every time there is a keyup, the script fires a jSON request, checks his things, and gets the result back to <code>typehead()</code> 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 <code>live()</code>, but since <code>on()</code> replaces it... I'm clueless !</p>
  
  <p>Any help appreciated !</p>