jQuery动态添加输入框后无法计算Debit Amount总和问题求助

问题原因 #

页面加载时，仅给当时存在的.expenses_debit输入框绑定了input事件，并且缓存了这些元素的集合。后续动态添加的新输入框既没有绑定事件，计算总和时也不会被包含在之前缓存的集合里，导致无法计入总和。

解决方案 #

• 使用事件委托绑定input事件，让动态添加的元素也能触发计算逻辑
• 每次计算总和时，重新获取所有.expenses_debit元素，而非依赖页面加载时的缓存
• 删除输入框后，主动触发一次总和计算

修改后的完整代码 #

HTML部分（无需改动）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
  <table class="table table-sm table-hover table-fixed" align="center" style="font-size: 9pt">
    <thead style="font-size: 11pt">
      <tr align="center">
        <th width="15%">Check Series</th>
        <th width="20%">Accounts and Explanations</th>
        <th>UACS Object Code</th>
        <th width="20%">Debit Amount</th>
        <th width="20%">Credit Amount</th>
      </tr>
    </thead>
    <tbody class="input_fields_wrap27">
      <tr>
        <td>
          <div class="row">
            <div class="col-lg-3">
              <button class="btn btn-sm btn-light add_field_button27">+</button>
            </div>
            <div class="col-lg-9">
              <div class="input-group input-group-lg">
                <input type="text" name="" style="font-size:12px" class="form-control form-control-sm" placeholder="Check No" id="expendable_furniture_check[]">
              </div>
            </div>
          </div>
        </td>
        <th>Furniture and Fixtures</th>
        <td>12345</td>
        <td>
          <div class="input-group input-group-lg">
            <span class="input-group-text" style="font-size: 9pt">P</span>
            <input type="text" style="font-size:12px" class="form-control form-control-sm expenses_debit operating_debit total1" placeholder="0.00" id="expendable_furniture_debit[]">
          </div>
        </td>
        <td>
          <div class="input-group input-group-lg">
            <span class="input-group-text" style="font-size: 9pt">P</span>
            <input type="text" style="font-size:12px" placeholder="0.00" class="form-control form-control-sm" disabled>
          </div>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td></td>
        <td colspan="2">
          <h5 align="right"><b>SUB TOTAL</b></h5>
        </td>
        <td>
          <div class="input-group input-group-lg">
            <span class="input-group-text" style="font-size: 16pt">P</span>
            <input type="text" style="font-size:12px" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" name="sub_debit" class="form-control form-control-sm operating_expenses" style="font-size: 16pt; font-weight: bold;"
              placeholder="0.00" disabled="" id="sub_debit">
          </div>
        </td>
        <td>
          <div class="input-group input-group-lg">
            <span class="input-group-text" style="font-size: 16pt">P</span>
            <input type="text" style="font-size:12px" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" name="sub_credit" class="form-control form-control-sm" id="sub_credit" style="font-size: 16pt; font-weight: bold;"
              placeholder="0.00" disabled="">
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

JavaScript部分（修改后的代码）

// 封装计算总和的函数，方便复用
function calculateDebitTotal() {
  const $res_debit = $("#sub_debit");
  // 每次计算时重新获取所有.expenses_debit元素
  const total = $(".expenses_debit").get().reduce((acc, el) => {
    acc += parseFloat(el.value, 10) || 0;
    return acc;
  }, 0).toFixed(2);
  $res_debit.val(total);
}

jQuery($ => {
  // 使用事件委托，绑定到父元素，支持动态添加的元素
  $(document).on("input", ".expenses_debit", calculateDebitTotal);
  
  // 页面加载时先计算一次初始值
  calculateDebitTotal();
});

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".input_fields_wrap27");
  var add_button = $(".add_field_button27");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<tr><td><div class="row"><div class="col-lg-3"><a href="#" class="remove_field27"><button class="btn btn-sm btn-light">-</button></a></div><div class="col-lg-9"><div class="input-group input-group-lg"><input type="text" name="" style="font-size:12px" class="form-control form-control-sm" placeholder="Check No" id="expendable_furniture_check[]"></div></div></div></td><th>Furniture and Fixtures</th><td>12345</td><td><div class="input-group input-group-lg"><span class="input-group-text" style="font-size: 9pt">P</span><input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm expenses_debit operating_debit total1" placeholder="0.00" id="expendable_furniture_debit[]"></div></td><td><div class="input-group input-group-lg"><span class="input-group-text" style="font-size: 9pt">P</span><input type="text" style="font-size:12px" autocomplete="off" class="form-control form-control-sm " placeholder="0.00" disabled></div></td></tr>');
    }
  });

  $(wrapper).on("click", ".remove_field27", function(e) {
    e.preventDefault();
    $(this).closest("tr").remove();
    x--;
    // 删除后重新计算总和
    calculateDebitTotal();
  })
});

关键改动说明 #

1. 封装计算函数：把总和计算逻辑抽成calculateDebitTotal函数，方便在输入变化、删除元素时调用
2. 事件委托：将input事件绑定到document，确保动态添加的.expenses_debit输入框也能触发计算
3. 动态获取元素：每次计算时都重新选择所有.expenses_debit元素，避免缓存旧集合导致遗漏新元素
4. 删除后触发计算：删除输入框后调用计算函数，确保总和实时更新

内容的提问来源于stack exchange，提问作者Mike Ahren Rances