JQuery的自动完成和克隆 [英] JQuery AutoComplete and Clone

问题描述

我试图使用jQuery克隆时，jQuery的自动完成功能应用于表中的多个行的问题。自动完成的工作中的第一行上，但失败时的其他的行被添加到表中工作。到目前为止，我有以下几点：

I have an issue trying to apply jQuery AutoComplete to multiple rows in a table when using jQuery clone. The AutoComplete works on the first row but fails to work when additional rows are added to the table. So far, I have the following:

HTML表格：<​​/ P>

HTML Table:

    <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查询定义产品标题和描述拉。

The data for the autocomplete is pulled from a simple MySQL query which defines the product title and description.

目前，添加新行工作正常，所以没有自动完成的表格的第一行，但它未能上添加任何其他行工作。即使我手动添加第二行的HTML表，自动完成不会对这一工作的。

At the moment, the add new row works fine and so does the AutoComplete for the first row of the table, however it fails to work on any additional rows that are added. Even if I add a second row manually to the HTML table, the AutoComplete doesn't work on this either.

是否有人知道，如果有一个（简单）的方法来修改上面的code，使这项工作？我是一个新手，当涉及到jQuery的让更多的细节，就更好了。

Does anybody know if there is an (easy) way to modify the above code to make this work? I'm a novice when it comes to jQuery so the more details, the better.

在此先感谢！

推荐答案

这是在使用动态添加元素插件的共同课题。它通常需要呼吁新元素插件它们插入到DOM之后。而不是重复相同的code初始页面加载的元素和新的元素，通常可以创建一个使用父元素为主要参考和搜索仅在该元素的简单的辅助函数的元素插件适用于。

This is a common issue using plugins on dynamically added elements. It usually requires calling the plugin on the new elements after they are inserted in the DOM. Instead of duplicating the same code for the initial page load elements and new elements, you can usually create a simple helper function that uses a parent element as the main reference and searches only within that element for the elements to apply the plugin to.

重要：您正在重复ID当您克隆新行和身份证的必须定义在一个页面独一无二的。下面code改变你的ID，以类代替，你将需要做同样在您的标记。

Important: You are repeating ID's when you clone new rows and ID's must be unique in a page by definition. The following code changes your ID's to class instead and you will need to do same in your markup.

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);
    });
}

这篇关于JQuery的自动完成和克隆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！