JQuery自动完成和克隆

在使用jQuery clone时，我在尝试将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()">

自动完成脚本：

$().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的新手，所以越详细越好

---

提前感谢

这是在动态添加的元素上使用插件的常见问题。它通常需要在新元素插入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);
    });
}

---

Charlietfl的帖子解决了我的问题，我唯一需要做的改变就是替换：

var$row=$table.find（'tr:last'）.clone（true）

与

var$row=$table.find（'tr:last'）.clone（）删除
true

希望这对其他人有所帮助：）
我认为问题在于，使用
clone（）
，您克隆了一个元素，该元素已经具有自动完成属性，然后自动完成无法将“再次”添加到新元素中。我认为您不应该
clone（）
，您应该使用元素的原始HTML代码并将其放入

编辑：

我是如何修复的：

要克隆的原始输入字段的自动完成（“销毁”）
克隆元素并将自动完成添加到其中
不要使用
clone（true）
，但您可以使用
clone（）
Hi Charlietfl。非常感谢您的详细回复，这对我帮助很大！我将输入字段更改为class=“product\u title”和class=“product\u description”，我还将代码更改为上面的代码。自动完成现在可以在所有新添加的字段上工作，但是唯一的问题是，当我在新添加的行中键入产品标题时，所有行上的产品描述都会更改。你知道这可能是什么原因吗？再次感谢！
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);
    });
}