title: Working on dynamically added input elements with Typeahead
body: <p>This is my code in adding rows which also have the <code>class='form-control mybur'</code>:</p>
  
  <pre><code>$("body").on("click", "#add_row_bur", function() {
      $("#bur" + o).html("&lt;td&gt;&lt;input type='text' name='bur_account_code[]' placeholder='Account Code' class='form-control mybur' data-provide='typeahead' id='account_code" + o + "'  required/&gt;&lt;td&gt;;
      $("#tab_logic_bur").append('&lt;tr id="bur' + (o + 1) + '"&gt;&lt;/tr&gt;');
      o++
  });
  $("body").on("click", "#delete_row_bur", function() {
      if (o &gt; 1) {
          $("#bur" + (o - 1)).html("");
          o--
      }
  });
  </code></pre>
  
  <p>I tried implementing typeahead on it but it doesn't work. I tried using this answers ( <a href="https://stackoverflow.com/questions/11037322/twitter-bootstrap-typeahead-unable-to-add-to-dynamically-created-element">answer 1</a>, <a href="https://stackoverflow.com/questions/15094680/add-a-listener-to-an-element-that-is-dynamically-added/15094730#15094730">answer 2</a>), but still fails.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>var objects = [];
  var map = {};
  $('input.mybur').typeahead({
      source: function(query, process) {
          $.ajax({
              url: 'proc_php/get_account_code.php',
              type: 'POST',
              dataType: 'JSON',
              async: true,
              success: function(data) {
                  objects = [];
                  map = {};
                  $.each(data, function(i, object) {
                      map[object.description] = object;
                      objects.push(object.description);
                  });
                  process(objects);
              }
          });
      },
      updater: function(item) {
          $('input.mybur').blur(function() {
              $(this).val(map[item].code);
          });
  
          return item;
      }
  });
  </code></pre>
  
  <p>I deleted all the code that I tried. Again, this will work on a pre-created elements:</p>
  
  <pre><code>&lt;input type="text" name='bur_account_code[]' placeholder='Account Code' class="form-control mybur" data-provide="typeahead" required/&gt;
  </code></pre>