jQuery中Trigger change异常：删除表格行后未更新费用小计

我来帮你排查这个问题！你遇到的情况是删除行后费用小计没更新，虽然触发了change事件，但其实这里有个更可靠的解决方式，还能优化代码结构让逻辑更清晰。

问题分析 #

你当前的做法是删除行后触发所有.charges输入框的change事件，理论上应该能触发计算，但模拟用户输入事件的方式可能存在潜在的时机问题，而且直接调用计算逻辑会更高效、更不容易出故障。另外，你的代码里没有处理输入框为空或非数字的情况，可能会导致小计变成NaN，这也是个隐藏问题。

解决方案 #

我们可以把计算小计的逻辑封装成独立函数，不管是输入框内容变化还是删除行，都直接调用这个函数，具体步骤如下：

1. 封装计算小计的独立函数
   把原本写在change事件里的计算逻辑抽出来，同时添加非数字值的判断，避免出现NaN：

   function calculateSubtotal() {
       var sum = 0.00;
       $('.charges').each(function(){
           // 转换为数字，空值或非数字则视为0
           var chargeValue = parseFloat($(this).val());
           if (!isNaN(chargeValue)) {
               sum += chargeValue;
           }
       });
       $('input[name^="freightBillSubtotal"]').val(sum.toFixed(2));
       calcTotal();
   }
   

2. 修改输入框的change事件监听
   让change事件直接调用封装好的函数：

   $(document).on('change', '.charges', function() {
       calculateSubtotal();
   });
   

3. 修改删除按钮的处理逻辑
   删除行后直接调用计算函数，不再需要触发change事件：

   $(document).on('click', '.btn_removeExisting', function(){
       var button_id = $(this).attr("id");
       $('#row'+button_id).remove();
       // 直接调用计算逻辑，替代触发change事件
       calculateSubtotal();
       alert('removeExisting');
   });
   

额外优化建议 #

你的HTML代码里存在重复的id（比如所有费用输入框的id都是charge），这违反了HTML规范（页面中id必须唯一）。可以修改为动态生成的id，比如结合循环的$sd->id：

<input type="text" id="charge{{$sd->id}}" class="form-control charges" placeholder="Charge" required name="shipment_details[{{$sd->id}}][charge]" value="{{$sd->charge}}">

这样修改后，不管是修改输入框内容还是删除行，都会直接执行计算逻辑，避免了模拟事件可能带来的问题，代码结构也更清晰易维护，同时还处理了非数字输入的边界情况。

内容的提问来源于stack exchange，提问作者Matthew