在动态生成的输入上委派typeahead

我有一个html表，我用来输入库存详细信息。在这个表中我有一个产品名称的输入框，我绑定了bootstrap的typeahead事件。但问题是第一行输入框已经是当它呈现在页面上时，typeahead工作正常。但是当我为更多条目添加新行时，typeahead不适用于它们。我知道事件委托的概念但问题是我不知道怎么做我在这种情况下实现它。通过这个指导我。 提前致谢。 这是我的html表 –

 
 
 
Product name
 
Amount
 
 
 
 
 
 
 
 
 
  

这是用于添加新行的javascript-

 $(function(){ $('#add').click(function(){ addnewrow(); }); }); function addnewrow(){ var tr = ''+ ''+ ''+ ''; $('.details').append(tr); } 

这是我如何使用typeahead-

  $(function(){ $('#items').typeahead({ source: function(query,process){ $.ajax({ url: 'itemexist.php', type: 'POST', data: 'query=' +query, dataType: 'JSON', async: true, success: function(data){ process(data); } }); } }); }); 

我知道之前已经问过这个问题，但是没有可接受的解决方案，我已经尝试过这些解决方案，但它没有用。 这是我尝试过的，但它似乎似乎没有工作 –

 $(document).on("keypress",".items",function(){ $('.items').typeahead({ source: function(query,process){ $.ajax({ url: 'itemexist.php', type: 'POST', data: 'query=' +query, dataType: 'JSON', async: true, success: function(data){ process(data); } }); } }); }); 

Answer 1

好吧，我实现了这个……我发布这个，这样可以帮助其他人这里的解决方案 –

  $(function(){ $('body').delegate('.items','focus',function(){ $(this).typeahead({ source: function(query,process){ $.ajax({ url: 'itemexist.php', type: 'POST', data: 'query=' +query, dataType: 'JSON', async: true, success: function(data){ process(data); } }); } }); }); });