0

jQueryオートコンプリートとクローンで関数を有効にする際に問題が発生しました。誰かが助けてくれることを期待しています。これが少し詳細すぎる場合は申し訳ありません！

タイトル、説明、数量、価格、合計が記載されたテーブルがあります。ユーザーは、商品フィールドでオートコンプリートを使用して、タイトルの説明と価格を取得できます。同時に、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（）;を置き換えると clone（true）; その後、乗算は機能しますが、オートコンプリートは、使用時に前のすべての行の価格を更新するため、正しく機能しません。

私はJSとjQueryがあまり得意ではないので、これが修正する簡単な間違いであることを望んでいますか？

どうもありがとう！

4

1 に答える 1

1

問題はclone(true)、データとイベントも複製されることを意味します。

clone()メソッドを使用して、このようなイベントを作成することをお勧めします

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

古いバージョンの場合、uはを使用できますlive()。

このメソッドは、後でテーブルに追加される新しい行ごとに呼び出されます。

于 2012-12-03T11:51:36.173 に答える