尝试使用 jQuery、克隆和乘法函数

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();与克隆（真）；然后乘法可以工作，但是 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()。

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