Question

我有一个问题，启用jQuery AutoComplete和Clone的功能，我希望有人可以帮助我。对不起，如果这有点过于详细！

我有一张表格，里面有标题，描述，数量，价格和总数。用户可以在产品字段上使用自动填充来获取标题的描述和价格。同时，我有一个使用克隆的“添加行”功能，我试图使用另一个函数来增加数量和价格（如果有的话）。到目前为止，我有以下内容：

向表中添加新行的代码：

var $table;
$(function() {
     $table=$('#invoiceitems'); 
     var $existRow=$table.find('tr').eq(1);
      bindAutoComplete($existRow);
});

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

自动完成代码：

function bindAutoComplete($row){
    $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.closest('.product_description').val(data.description);
        $row.find('.product_price').val(data.price);
        $row.find('.qty').val("1");
    });
}

乘以价格和数量的代码：

$(document).ready(function() {    
$(".qty, .product_price").keyup(function() {
   var $row = $(this).closest("tr"),
       price = $row.find(".product_price").val();
           qty = $row.find(".qty").val();
    $row.find(".line_total").text(qty * price);
});

目前，自动完成和克隆工作正常，但是数量和价格的乘法仅适用于第一行，现在适用于添加的任何新行。如果我替换clone（）; with clone（true）;然后乘法工作，但AutoComplete无法正常工作，因为它会在您使用它时更新所有先前行的价格。

我对JS和jQuery不是很好，所以我希望这是一个简单的错误来纠正？

非常感谢！

Answer 1

问题是clone(true)意味着数据和事件也将被克隆。

我建议使用clone()方法并将此事件设为

用于jQuery 1.7及更高版本。

$(document).ready(function() {    
   $('table#invoiceitems').on('keyup', ".qty, .product_price", function() {
       var $row = $(this).closest("tr"),
       price = $row.find(".product_price").val();
       qty = $row.find(".qty").val();
       $row.find(".line_total").text(qty * price);
   }
});

对于旧版本，您可以使用live()。

将为稍后将添加到表中的每个新行调用此方法。

试图使用jQuery，克隆和乘法功能

1 个答案: