在动态生成的输入上委托预先输入 [英] To delegate typeahead on dynamically generated input

问题描述

我有一个html表格，我正在使用它来输入库存详细信息。在这个表格中，我有一个输入框用于产品名称，我在其上绑定typeahead事件的bootstrap.But问题是，对于第一行输入框当它被呈现时它已经出现在页面上，typeahead工作正常。但是当我为更多条目添加新行时，typeahead不会与它们一起工作。我知道事件委托的概念，但问题是我没有知道如何在这种情况下实施它。诚挚地指导我通过这个。
提前致谢。
这是我的html表格 -

I have a html table which i am using to enter the inventory details .In this table I have a input box for product name on which I am binding typeahead event of bootstrap.But the problem is that for the first row input box which is already present on the page when it is rendered, typeahead works fine.But when i add new rows for more entries, typeahead does not works with them.I know about the concept of event delegation but the problem is that I don't know how do i implement it in this case.Kindly guide me through this. Thanks in advance. Here is my html table-

<table>
<thead>
<tr>
<td>Product name</td>
<td>Amount</td>
</tr>
</thead>
<tbody class="details">
<tr>
<td><input type="text class="items" name="items" id="items" data-provide="typeahead" /> </td>
<td><input type="text" name="amt" id="amt" class="amt" /></td>
</tr>
</tbody>
</table>

这里是用于添加新行的javascript -

here is the javascript used to add new rows-

$(function(){
  $('#add').click(function(){
    addnewrow();
  });
});
function addnewrow(){
 var tr = '<tr>'+
'<td><input type="text" name="items" id="items" class="items" data-provide="typeahead" autocomplete="off" /></td>'+
'<td><input type="text" name="amt" id="amt" class="amt" autocomplete="off" /></td>'+
'</tr>';
$('.details').append(tr);
}

这是我如何使用typeahead -

Here is the how i have used 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);
         }
    });
  }

  });
});

我知道这个问题以前已经问过，但没有可接受的解决方案，我尝试了这些解决方案，但它不工作。
这是我试过的，但它似乎并不奏效 -

I know this question has been asked before but there is no accepted solution and I have tried those solutions but it is not working. Here is what I have tried,but still it doesn't seems to work-

$(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);
         }
    });
  }

  });
 });

推荐答案

这可以帮助别人
这是解决方案 -

Well I achieved this..I am posting this so that this can help some one else Here's the solution-

 $(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);
         }
    });
  }

  });
 });
  });

这篇关于在动态生成的输入上委托预先输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！