title: How do I add typeahead.js (Bloodhound) to jQuery dynamically-created fields?
body: <p>I can load Twitter typeahead just fine on a static form.  However, in this situation, I would like to apply it to a dynamically-generated field.  Even though my duplication script adds the required ".typeahead" class to the new input, it never seems to work.  Indeed, the static form is surrounded by several additional classes, which are not generated for the dynamic fields.</p>
  
  <p>I feel like there is something more I need to do in order for the dynamic fields to function like the static field, but I am not sure.</p>
  
  <p>The Javascript:</p>
  
  <pre><code>&lt;!-- Dataset: First Names --&gt;
  var firstnames = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      limit: 5,
      prefetch: {
          url: './datasets/firstnames.json',
          filter: function(list) {
              return $.map(list, function(firstname) { return { name: firstname }; });
          }
      }
  });
  
  firstnames.initialize();
  
  $('.typeahead').typeahead(null, {
      name: 'firstnames',
      displayKey: 'name',
      source: firstnames.ttAdapter()
  });
  &lt;!-- Dataset: First Names (End) --&gt;
  
  &lt;!-- Dynamic Fields --&gt;
  var count=2;
  $("#add").click(function(){
      var html="&lt;div id='div"+count+"'&gt;&lt;input id='firstname"+count+"' type='text' class='typeahead' placeholder='Additional First Name'&gt;&lt;/input&gt;&lt;button type='button' onclick=remover('"+count+"')&gt;Remove&lt;/button&gt;&lt;/div&gt;";
  $("#additionalnames").append(html);
  
      count++;
  });
  
  function remover(which){
    $("#div"+which).remove();
  }
  &lt;!-- Dynamic Fields End --&gt;
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;p&gt;Standard field works fine (type a letter from a to g):&lt;/p&gt;
  &lt;input type="text" id="firstname" name="firstname" class="typeahead" placeholder="First Name"&gt;
  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;p&gt;Dynamic field does not:&lt;/p&gt;
  &lt;div id="additionalnames"&gt;&lt;/div&gt;
  &lt;button id="add" type="button"&gt;Add Another&lt;/button&gt;
  </code></pre>
  
  <p>I don't think JSFiddle can handle my json file, so a live implementation is here:
  <a href="http://drjoeseriani.com/firstnames" rel="nofollow">http://drjoeseriani.com/firstnames</a></p>
  
  <p>A downloadable version of this resides here:
  <a href="http://drjoeseriani.com/firstnames.zip" rel="nofollow">http://drjoeseriani.com/firstnames.zip</a></p>
  
  <p>Thanks for any help.</p>