7

使用 jQuery 克隆时，我在尝试将 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 表中，AutoComplete 也不起作用。

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

提前致谢！！！

4

3 回答 3

6

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

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

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);
    });
}
于 2012-12-01T22:05:35.837 回答
2

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

编辑：

我如何修复它：

  1. autocomplete("destroy")对于您要克隆的原始输入字段。
  2. 克隆您的元素并为其添加自动完成功能

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

于 2014-06-20T13:06:20.057 回答
1

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

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

和

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

希望这对其他人有帮助:)

于 2012-12-02T01:37:49.513 回答