title: Bootstrap Typeahead not working on dynamically added elements?
body: <p>I am adding an input box via an <code>onclick</code> function - so the input box isn't there when the page render's and when <code>document.ready()</code> fires.</p>
  
  <p>I came up with a work-around by adding a <code>onclick</code> function to the input field that calls a javascript function.</p>
  
  <p><code>http://goo.gl/id6esq</code> will returns json:</p>
  
  <blockquote>
    <p>["1175-1234567890","1175-1234567891","1175-1234567892","1175-1234567893","1175-1234567894","1175-1234567895"]</p>
  </blockquote>
  
  <p>(I couldn't get a <a href="http://jsfiddle.net/kRSQZ/5/" rel="nofollow">jsfiddle</a> working - won't do the typeahead)</p>
  
  <pre><code>&lt;a id="clickbtn" class="btn-btn-inverse"&gt;Click me&lt;/a&gt;
  
  &lt;div id="insert"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function() {
          $('#clickbtn').on('click', function() {
              $('#insert').html("&lt;input type='text' onclick='javascript:invoice_no_setup_typeahead($(this))' name='retrun-order-invoice_no' class='return-order-invoice_no' data-provide='typeahead'&gt;");
          });
      });
      function invoice_no_setup_typeahead(self) {
          console.log('focus acheived');
          $(self).typeahead({
              source: function(query, process) {
                  console.log(query);
                  return $.get(
                          'http://goo.gl/id6esq', {
                      query: query
                  },
                  function(data) {
                      console.log(data);
                      return process(data);
                  }, 'JSON');
              }
          });
  
      }
  &lt;/script&gt;
  </code></pre>