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

【问题标题】：Jquery function only works on the first row even with $(document).on()Jquery 函数仅适用于第一行，即使使用 $(document).on()
【发布时间】：2019-11-16 05:43:20
【问题描述】：

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

提前感谢您的帮助...

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

如果之前有人问过这个问题，我很抱歉，但我确实在这里检查了类似的问题并尝试了建议的解决方案，但它们似乎都不起作用。提前感谢您的回答。

【问题讨论】：

正如您在此处介绍的那样，它仅在您移出 第二列 时才有效，这是唯一具有order_item_price 类的列
因为我省略了整个代码的某些部分。但是谢谢你的回复。

标签： javascript php jquery html invoice

【解决方案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 标签中

【讨论】：