Jquery 函数仅适用于第一行，即使使用 $(document).on()

Question

我遵循了使用 PHP jquery mysql 和 bootstrap 的发票系统教程。我一个字符一个字符地遵循代码，但是某个 class 的 $(document).on() 函数不起作用。然而，在教程视频中，它似乎有效。 主要问题是 $(document).on() 函数调用仅适用于 table 中的第一行，不适用于其余行。

提前感谢您的帮助...

HTML 部分：

<td><input type="text" name="order_item_quantity[]" id="order_item_quantity'+count+'" data-srno="'+count+'" class="form-control input-sm number_only order_item_quantity"></td>

<td><input type="text" name="order_item_price[]" id="order_item_price'+id+'" data-srno="'+id+'" class="form-control input-sm number_only order_item_price"></td>

<td><input type="text" name="order_item_actual_amount[]" id="order_item_actual_amount'+count+'" data-srno="'+count+'" class="form-control input-sm order_item_actual_amount" readonly /></td>

Jquery函数：

             var final_total_amt = $('#final_total_amt').text();
             var total = $('#total_item').val();
             var count = 1;
                    function cal_final_total(count){
                        var final_item_total = 0;
                        for(var j=1; j<=total; j++){
                            var qty = 0;
                            var price = 0;
                            var actual_amount = 0;

                            qty = $('#order_item_quantity'+j).val();

                            if (qty > 0) {
                            price = $('#order_item_price'+j).val();
                               if (price > 0) {
                                   actual_amount = parseFloat(qty)*parseFloat(price);
                                   $('#order_item_actual_amount'+j).val(actual_amount);
                               }
                            }

$(document).on()函数调用

                    $(document).on('blur', '.order_item_price', function(){
                        cal_final_total(count);
                    });

如果之前有人问过这个问题，我很抱歉，但我确实在这里检查了类似的问题并尝试了建议的解决方案，但其中 none 似乎有效。预先感谢您的回答。

Answer 1

你可以直接替换这段代码来解决

function cal_final_total() {
    var final_item_total = 0;
    $('.order_item_quantity').each(function(){
        parent = $(this).closest('tr');
        qty = +parent.find('.order_item_quantity').val();
        price = +parent.find('.order_item_price').val();
        actualAmount = qty*price;
        final_item_total += final_item_total;
        parent.find('.order_item_actual_amount').val(actualAmount);
    });
}

确保您的输入字段在单独的 tr 标签中

Jquery 函数仅适用于第一行，即使使用 $(document).on()

Jquery function only works on the first row even with $(document).on()

html

javascript

php

jquery

invoice