Question

在使用jQuery clone时，尝试将jQuery AutoComplete应用于表中的多行时遇到问题。 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);
    });
}

Answer 2

Charlietfl的帖子解决了我的问题，我必须做的唯一改变就是取代：

var $row=$table.find('tr:last').clone(true);

与

var $row=$table.find('tr:last').clone();删除了true。

希望这有助于其他人：）

Answer 3

我认为问题是，clone()，您克隆了一个已经具有自动完成属性的元素，然后自动完成无法再次添加＆＃34;＆＃34;到新的元素。我认为你不应该clone()，你应该使用元素的原始HTML代码并将其放入。

修改

我如何解决它：

autocomplete("destroy")表示您要克隆的原始输入字段。

克隆您的元素并向其添加自动填充

并且不要使用clone(true)，但您可以使用clone()

JQuery AutoComplete和Clone

3 个答案: