自動完成功能在動態數據輸入錶行中不起作用

Question

我已經創建了動態數據輸入表。我已經添加了自動完成功能，它工作正常。但問題是如果我添加新行到我的動態表自動完成功能不工作在該行。如何解決這個問題？

******** ******** HTML

<table class="table table-bordered" id="curd_table"> 
      <tr> 
       <th width="15%">User ID</th> 
       <th width="20%">Name</th> 
       <th width="20%">NIC</th> 
       <th width="20%">Amount</th> 
       <th width="25%">Pay date (YYYY-MM-DD)</th> 
       <th></th> 
      </tr> 
      <tr> 
       <td contenteditable="true" class="uid " name="uid" id="uidr"></td> 
       <td contenteditable="true" class="name " name="name" id="namer"></td> 
       <td contenteditable="true" class="nic" name="nic" id="nicr"></td> 
       <td contenteditable="true" class="amount"></td> 
       <td contenteditable="true" class="paydate"></td> 
       <td></td> 
      </tr> 
     </table> 

**** JS功能****

$(document).ready(function(){ 
     var count=1; 
     $('#add').click(function(){ 
      count=count+1; 
      var html_code ="<tr id='row"+count+"'>"; 
      html_code +="<td contenteditable='true' class='uid' name='uid' id='uidr'></td>"; 
      html_code +="<td contenteditable='true' class='name' name='name' id='namer'></td>"; 
      html_code +="<td contenteditable='true' class='nic' name='nic' id='nicr'></td>"; 
      html_code +="<td contenteditable='true' class='amount'></td>"; 
      html_code +="<td contenteditable='true' class='paydate'></td>"; 
      html_code +="<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>"; 
      html_code +="</tr>"; 
      $('#curd_table').append(html_code); 

     }); 


$('#uidr').autocomplete({ 
      source: function(request, response) { 
       $.ajax({ 
        url : '../control/autoComp.php', 
        dataType: "json", 
        method: 'POST', 
        data: { 
         id_startsWith: request.term, 
         type: 'pay_table', 
         row_num : 1 
        }, 
        success: function(data) { 
         response($.map(data, function(item) { 
         var code = item.split("|"); 
         return { 
          label: code[0], 
          value: code[0], 
          data : item 
          } 
         })); 
        } 
       }); 
      }, 
      autoFocus: true, 
      minLength: 0, 
      select: function(event, ui) { 
      var names = ui.item.data.split("|"); 
      $('#namer').text(names[1]); 
      $('#nicr').text(names[2]); 
      } 
    }); 
}); 

自動完成不能用紅色箭頭標記。這些是動態添加的行。

Answer 1

你應該改變你的jquery選擇器來選擇類，而不是id（唯一值）。

和你錯過 '}）' 結束 '$（文件）。就緒（函數（）{'

編輯： 如果動態地添加組件，您應該使用在（）函數來綁定事件新添加的成分。

$(document).on('autocomplete','.uid',function(){ 
     source: function(request, response) { 
      $.ajax({ 
       url : '../control/autoComp.php', 
       dataType: "json", 
       method: 'POST', 
       data: { 
        id_startsWith: request.term, 
        type: 'pay_table', 
        row_num : 1 
       }, 
       success: function(data) { 
        response($.map(data, function(item) { 
        var code = item.split("|"); 
        return { 
         label: code[0], 
         value: code[0], 
         data : item 
         } 
        })); 
       } 
      }); 
     }, 
     autoFocus: true, 
     minLength: 0, 
     select: function(event, ui) { 
      var names = ui.item.data.split("|"); 
      $(this).nextAll('.name').text(names[1]);//or just next() 
      $(this).nextAll('.nic').text(names[2]);//or just next().next() 
     } 
});