自动完成功能无法在动态创建的行上工作

Question

我想动态添加行，所有行都必须具有唯一的ID，并自动在此处建议我的代码。不幸的是它不工作。

我有以下结果

1. 动态添加行。
2. 动态添加所有测试框的Autosuggest。

3. 所有动态添加元素的唯一ID。

   $(document).ready(function() 
   { 
   var currentItem = 1; 
   
   $('#itemCode_1').autocomplete({ 
   source: 'data/item-data.php', 
   minLength: 1, 
   select: function(event, ui) { 
       var $itemrow = $(this).closest('tr'); 
   
         $itemrow.find('#itemCode_1').val(ui.item.itemCode); 
         $itemrow.find('#itemDesc_1').val(ui.item.itemDesc); 
         $itemrow.find('#itemPrice_1').val(ui.item.itemPrice); 
   
   
         $('#itemQty_1').focus(); 
   
       return false; 
   } 
   
   }).data("autocomplete")._renderItem = function(ul, item) { 
   return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.itemCode + " - " + item.itemDesc + "</a>") 
       .appendTo(ul); 
   }; 
   
   
   
   $('#addRow').click(function(){ 
       currentItem++; 
       var strToAdd = '<tr class="item-row"><td></td><td><input name="itemCode[]" value="" class="tInput" id="itemCode_'+currentItem+'" tabindex="1"/> </td><td><input name="itemDesc[]" value="" class="tInput" id="itemDesc_'+currentItem+'" readonly="readonly" /></td><td><input name="itemQty[]" value="" class="tInput" id="itemQty_'+currentItem+'" onChange="calc('+currentItem+')" tabindex="2"/></td><td><input name="itemPrice[]" value="" class="tInput" id="itemPrice_'+currentItem+'" onChange="calc('+currentItem+')"/> </td><td> <input type="text" name="sub_total" id="sub_total_'+currentItem+'"></td></tr>'; 
   
       $('#itemsTable').append(strToAdd); 
   
   
   
   }); 
   var bindfield=$('itemCode_'+currentItem+''); 
       var itemdes=$('#itemDesc_'+currentItem+''); 
       var itempr=$('#itemPrice_'+currentItem+''); 
       var itemqty=$('#itemQty_'+currentItem+''); 
   bindfield.each(function(){ 
       $(this).autocomplete({ 
       source: 'data/item-data.php', 
       minLength: 1, 
       select: function(event, ui) {    
        var $itemrow = $(this).closest('tr'); 
   
         $itemrow.find(bindfield).val(ui.item.itemCode); 
         $itemrow.find(itemdes).val(ui.item.itemDesc); 
         $itemrow.find(itempr).val(ui.item.itemPrice); 
   
   
         $(itemqty).focus(); 
   
       return false; 
       } 
   }); 
       }) 
   $('#itemCode').focus(function(){ 
   window.onbeforeunload = function(){ return "You haven't saved your data. Are you sure you want to leave this page without saving first?"; }; 
   }); 
   
   }); 
   

Answer 1

你可以给的，而不是给ID，通过提供这样的自动完成功能应用于所有具有指定类name..In代码上面你可以给元素的类名

$（'.ClassName）.autocomplete（{}）;

代替

$（ '＃itemCode_1'）自动完成（{}）。

为下面的代码给出动态创建的元素的工作。 。

$（ 'CLASSNAME '）生活（' keydown.autocomplete'，函数（）{

 // Write your code to initiate the autocomplete 

}）;

用于动态创建的元素进行相同的类名... 希望这将工作试试这个...

Answer 2

jQuery(document).ready(function($){ 
    var counter =2; 
    var count=2; 
    $("#addmember").click(function() {  
     $('#member').append('<input type="text" name="member' +counter+ '" id="member' + counter + '">'); 
     counter++; 
     jQuery("#member" +count+ "").autocomplete('Your Url', { 
      multiple: false, 
      matchContains: true, 
      width: 180, 
      selectFirst: true, 
     }); 
     jQuery("#member" +count+ "").result(function(event, data, formatted) { 

      count++; 
      } 
     }); 
    }); 
}); 

这是头部分和体

<input name="member1" id="member1" type="text" /> 
<div id="member"></div>