jQuery动态新增表单行 price联动对应total字段失效修复

当前代码存在三个核心问题，导致动态新增行的联动失效、值匹配错误：

• 价格输入框的change事件是页面初始加载时直接绑定的，仅对当时已存在于DOM中的第一行输入框生效，后续动态插入的新输入框没有绑定该事件
• 原有事件逻辑是修改任意价格框时，会给页面上所有总计框统一赋值，无法实现同一行的对应同步，就算事件绑定正常也会出现值全局覆盖的问题
• 动态新增的HTML重复使用了相同的id属性，不符合HTML规范，容易引发DOM选择异常

按以下逻辑调整即可：

• 将价格框的事件改为事件委托，绑定到始终存在的父容器.container1上，确保初始加载、后续新增的所有价格输入框触发事件时都能被监听到
• 事件触发时，先定位当前修改的价格输入框所属的行组，再查找同一组内对应的总计输入框赋值，不要全局选择所有总计框
• 清理重复的id属性，给每一组表单字段加统一的行级包裹类方便DOM定位，补上原有逻辑中缺失的删除按钮
• 建议将change事件替换为input事件，实现用户输入时实时同步，无需等输入框失焦才更新值

JS 逻辑 #

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".container1");
  var add_button = $("#niy");

  var x = 1;
  // 新增行逻辑
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      // 每组字段套service-row类方便定位，移除重复id，补充删除按钮
      $(wrapper).append(`
        <div class="service-row row">
          <div class="col-lg-4 col-sm-6">
            <div class="mb-4">
              <label>Service Type</label>
              <input type="text" class="form-control" required name="service[]">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="mb-4">
              <label>Price</label>
              <input type="text" class="form-control price-input" required name="price[]">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="mb-4 position-relative">
              <label>Total</label>
              <input type="text" class="form-control total-input" required name="total[]" readonly>
              <a href="javascript:;" class="delete btn btn-sm btn-danger position-absolute" style="top:32px; right:0;">删除</a>
            </div>
          </div>
        </div>
      `);
    } else {
      alert('You Reached the limits')
    }
  });

  // 删除行逻辑，用事件委托兼容动态新增的删除按钮
  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).closest('.service-row').remove();
    x--;
  })

  // 价格联动总计：委托绑定到父容器，仅修改同一行的总计值
  $(wrapper).on("input", ".price-input", function() {
    $(this).closest('.service-row').find('.total-input').val($(this).val());
  });
});

HTML 初始结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
  <!-- 初始第一行和新增行保持统一结构 -->
  <div class="service-row row">
    <div class="col-lg-4 col-sm-6">
      <div class="mb-4">
        <label>Service Type</label>
        <input type="text" class="form-control" required name="service[]">
      </div>
    </div>
    <div class="col-lg-4 col-sm-6">
      <div class="mb-4">
        <label>Price</label>
        <input type="text" class="form-control price-input" required name="price[]">
      </div>
    </div>
    <div class="col-lg-4 col-sm-6">
      <div class="mb-4">
        <label>Total</label>
        <input type="text" class="form-control total-input" required name="total[]" readonly>
      </div>
    </div>
  </div>
</div>
<a id="niy" class="btn btn-warning" style="color:white">Add New Service Field &nbsp;
  <span style="font-size:16px; font-weight:bold;">+ </span>
</a>

说明：总计框加了readonly属性避免用户手动改值导致数据不一致，如果需要允许手动修改总计值，直接移除该属性即可。

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