jQuery动态输入框change事件失效问题求助

问题场景 #

开发动态输入框功能，要求输入框值改变时自动新增一行输入框。第一行输入框值改变能成功新增，但第二行及之后的输入框值改变无法触发新增操作。

相关截图 #

问题原因 #

1. 初始代码仅在页面加载完成时，给**第一个输入框（#item_code_1）**绑定了change事件，后续动态生成的输入框在初始化时不存在，因此没有绑定事件。
2. tes函数中每次新增行都重复绑定remove事件，会造成事件冗余，可能引发多次触发问题。

解决方案 #

修改JavaScript代码，采用事件委托的方式绑定事件，确保动态生成的元素也能触发事件：

var X = 1;

function tes() {
  var wrapper = $('.receive-item');
  X++;
  $(wrapper).append(
    '<tr>' +
    '<td><input type="text" class="form-control form-control-sm item_code_' + X + '" id="item_code_' + X + '" name="item_code[]" placeholder="Item Code"></td>' +
    '<td><a href="javascript:void(0)" class="btn btn-sm btn-danger remove" title="Delete"><i class="fas fa-minus"></i></a></td>' +
    '</tr>'
  );
}

$(document).ready(function() {
  // 事件委托：监听所有item_code输入框的change事件（包括动态生成的）
  $('.receive-item').on('change', 'input[name="item_code[]"]', function() {
    tes();
  });

  // 绑定手动新增按钮事件
  $('.addButton').click(tes);

  // 事件委托绑定删除按钮事件，仅绑定一次
  $('.receive-item').on('click', '.remove', function(e) {
    e.preventDefault();
    // if(!confirm("Delete this row?")) return;  
    $(this).closest("tr").remove();
  });
});

HTML代码无需修改，保留原结构即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />


<div class="row">
  <div class="col-md-6 field-wrapper">
    <h5>List Receive Item</h5>
    <div class="form-group">
      <div class="table-responsive">
        <table class="table table-hover table-bordered mb-0 text-dark">
          <thead>
            <tr>
              <th>Item Code</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody class='receive-item'>
            <tr>
              <td><input type="text" class="form-control form-control-sm item_code_1" id="item_code_1" name="item_code[]" placeholder="Item Code"></td>
              <td><a href="javascript:void(0)" class="btn btn-sm btn-primary addButton" title="Add Receive Items"><i class="fas fa-plus"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

修改说明 #

1. 事件委托绑定change：将事件绑定到父容器.receive-item，监听所有name="item_code[]"的输入框，不管是初始还是动态生成的输入框，触发change时都会执行新增逻辑。
2. 统一事件绑定：把删除按钮的事件绑定移到页面初始化时，仅绑定一次，避免重复绑定造成的冗余问题。
3. 合并了原代码中多个$(document).ready块，代码结构更简洁。

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