JQuery 自动完成和克隆

Question

在使用 jQuery 克隆时，我尝试将 jQuery AutoComplete 应用于表中的多行时遇到问题。自动完成功能适用于第一行，但在向表中添加其他行时无法工作。到目前为止，我有以下内容:

HTML 表格:

    <table class="table" cellspacing="0" id="myTable">
      <tr> 
        <th width="40%">Item</th> 
        <th width="60%">Description</th> 
      </tr> 
      <tr>
        <td>input name="product_title" id="product_title" type="text"><td> 
        <td><textarea name="product_description" id="product_description"></textarea></td> 
      </tr> 
    </table>
   <input type="button" value="Add Row" onclick="javascript:addRow()">

克隆脚本:

function addRow(){
  $('#myTable tr:last').clone(true).insertAfter('#myTable tr:last');
  $('#myTable tr:last input').val("");
  $('#myTable tr:last input:first').focus();        
}

自动完成脚本:

$().ready(function() {
  $("#product_title").autocomplete(products, {
    width: 380,
    matchContains: "word",
    formatItem: function(row) {
      return row.title;
    }
  });   
  $('#product_title').result(function(event, data) {
  $('#product_description').val(data.description);
  });   
});

自动完成的数据取自定义产品标题和描述的简单 MySQL 查询。

目前，添加新行工作正常，表第一行的自动完成功能也工作正常，但它无法处理添加的任何其他行。即使我手动向 HTML 表添加第二行，自动完成功能也不起作用。

有人知道是否有一种(简单)方法可以修改上述代码以使其工作？我是 jQuery 的新手，所以越详细越好。

提前致谢!!!

Answer 1

这是在动态添加的元素上使用插件的常见问题。通常需要在新元素插入 DOM 后调用插件。您通常可以创建一个简单的辅助函数，该函数使用父元素作为主要引用，并仅在该元素中搜索要应用插件的元素，而不是为初始页面加载元素和新元素复制相同的代码。

重要提示:当您克隆新行时，您会重复 ID，并且根据定义，ID 在页面中必须是唯一的。以下代码将您的 ID 更改为类，您需要在标记中执行相同的操作。

var $table;
$(function() {
     $table=$('#myTable'); 
     var $existRow=$table.find('tr').eq(1);
      /* bind to existing elements on page load*/
      bindAutoComplete($existRow);
});

function addRow(){
    var $row=$table.find('tr:last').clone(true);
    var $input=$row.find('input').val("");
    $table.append($row);
    bindAutoComplete($row );
    $input.focus();

}


function bindAutoComplete($row ){
    /* use row as main element to save traversing back up from input*/
    $row.find(".product_title").autocomplete(products, {
        width: 380,
        matchContains: "word",
        formatItem: function(row) {
            return row.title;
        }
    });
    $row.find('.product_title').result(function(event, data) {
        $row.find('.product_description').val(data.description);
    });
}