javascript - 触发 jQuery 中的更改问题

Question

我有一个表格，其中有多行，其中一列是费用的输入。 html 如下:

<tbody>
                    @foreach($shipment_details as $sd)
                        <tr style="height:40px" tr id="row{{$sd->id}}">
                            <td style="width:8%;text-align:center;">
                            <input type="text" id="piecesNumber" class="form-control" placeholder="No. Pieces" required name="shipment_details[{{$sd->id}}][piecesNumber]" value="{{$sd->pieces_number}}">
                            </td>
                            <td style="width:16%;text-align:center;">
                            <select id="pieces_type" class="form-control full-width" required name="shipment_details[{{$sd->id}}][piecesType]">
                                @foreach($cPiecetypes as $cPt)
                                    <option value="{{$cPt->id}}"
                                     @if ($sd->pieces_type == $cPt->id) selected="selected" 
                                     @endif>{{$cPt->label}}</option>
                                @endforeach

                            </select>    
                            </td>
                            <td>
                             <select id="pieces_type" class="form-control full-width" required name="shipment_details[{{$sd->id}}][rateType]">
                                @foreach($cRatetypes as $cRt)
                                    <option value="{{$cRt->id}}"
                                     @if ($sd->rate_type == $cRt->id) selected="selected" 
                                     @endif>{{$cRt->label}}</option>
                                @endforeach

                            </select>

                            </td>
                            <td style="width:16.5%;text-align:center;">
                            <input type="text" id="weight" class="form-control" placeholder="Weight" required name="shipment_details[{{$sd->id}}][weight]" value="{{$sd->weight}}">

                            </td>
                            <td style="width:16.5%;text-align:center;">

                            <select id="hazmat" class="form-control full-width" required name="shipment_details[{{$sd->id}}][hazmat]">

                                    <option value="0"
                                     @if ($sd->hazmat = 0) selected="selected" 
                                     @endif>No</option>
                                     <option value="1"
                                     @if ($sd->hazmat = 1) selected="selected" 
                                     @endif>Yes</option>

                            </select>

                            </td>
                            <td style="width:16.5%;text-align:center;">
                            <input type="text" id="description" class="form-control" placeholder="Description" required name="shipment_details[{{$sd->id}}][description]" value="{{$sd->description}}">

                            </td>
                            <td style="width:16.5%;text-align:center;">
                            <input type="text" id="charge" class="form-control charges" placeholder="Charge" required name="shipment_details[{{$sd->id}}][charge]" value="{{$sd->charge}}">
                            </td>
                            <td><button type="button" name="removeExisting" id="{{$sd->id}}" class="btn btn-danger btn_removeExisting">X</button></td>
                </tr>

                    @endforeach
            </tbody>

如您所见，在 reach 行的末尾有一个类为“btn_removeExisting”的按钮，它连接到此脚本:

  $(document).on('click', '.btn_removeExisting', function(){  
       var button_id = $(this).attr("id");   
       $('#row'+button_id+'').remove();
       $( '.charges' ).trigger( 'change' );
       alert('removeExisting');
  });

警报只是通知我脚本已正确完成，这就是我的问题所在。通过按下按钮，它正确地删除了正确的行，并提醒我，但中间的触发器是我的问题的根源。

关于我更改收费触发器的脚本:

$(document).on('change', '.charges', function() {
    var sum = 0.00;
    $('.charges').each(function(){
        sum += +$(this).val();  
    });
    $('input[name^="freightBillSubtotal"]').val(sum.toFixed(2));
    calcTotal();
}); 

现在奇怪的是，如果我只更改一个电荷输入，代码就可以工作，所以如果我将一行中的电荷从 10.00 更改为 0.00，则小计会减去 10.00。但出于某种原因，当整行(以及它的特定费用)被删除时，它不会做同样的事情。

Answer 1

与其尝试像那样手动触发事件，不如创建一个函数并从两个事件中调用它:

$(document).on('click', '.btn_removeExisting', function() {
  var button_id = $(this).attr("id");
  $('#row' + button_id + '').remove();
  calcSum();
  alert('removeExisting');
});
$(document).on('change', '.charges', calcSum);

function calcSum() {
  var sum = 0.00;
  $('.charges').each(function() {
    sum += $(this).val();
  });
  $('input[name^="freightBillSubtotal"]').val(sum.toFixed(2));
  calcTotal();
});

注意:我假设您的行中存在无害的拼写错误:

sum += +$(this).val();

所以我改成了:

sum += $(this).val();