如何为jQuery动态追加元素中的Remove按钮绑定点击事件？

嘿，我看到你的问题了——动态添加的Remove按钮点了没反应对吧？这是个很常见的jQuery新手坑，原因很简单：你在页面加载完成后给.remove_button绑定了点击事件，但那些动态生成的按钮在绑定事件的时候还不存在于DOM里，所以自然没法触发。

核心解决方案：使用事件委托 #

jQuery的.on()方法支持事件委托，你可以把事件绑定到一个已经存在的父元素（比如你的.print_box）上，让它监听子元素（动态生成的.remove_button）的点击事件，这样不管子元素是何时创建的，都能触发事件。

另外先提一句，你代码里的HTML结构有问题：<tr>不能直接放在<div>里面，而且<input type="text">标签也没闭合，这些小问题也可能导致后续的异常，我会在修正后的代码里一起调整。

修正后的完整代码 #

<script>
$(document).ready(function() {
  // 点击Add按钮添加元素
  $("#add").click(function() {
    var someId = document.getElementById('someId').value;
    var name = document.getElementById('name').value;
    // 修正HTML结构：把tr放在table容器内，闭合input标签
    $('.print_box').append(`
      <tr class="${someId}">
        <td>
          <input type="button" ref="${someId}" class="remove_button" value="Remove">
        </td>
        <td>
          <input type="text" multiple name="name[]" value="${name}">
        </td>
      </tr>
    `);
  });

  // 使用事件委托绑定Remove按钮的点击事件
  $('.print_box').on('click', '.remove_button', function() {
    // 找到当前按钮所在的tr元素并移除
    $(this).closest('tr').remove();
    // 如果你的结构还是用div包裹的，就换成下面这句：
    // $(this).closest('div').remove();
  });
});
</script>

关键部分解释 #

1. 事件委托的写法：$('.print_box').on('click', '.remove_button', function() {...})

   • 第一个参数是事件类型（这里是click）
   • 第二个参数是要监听的子元素选择器（动态生成的.remove_button）
   • 第三个参数是事件触发后的回调函数

2. 移除对应元素：$(this).closest('tr').remove()

   • $(this)指向被点击的Remove按钮
   • .closest('tr')会向上查找最近的父级<tr>元素（如果是div结构就换成div）
   • .remove()把这个元素从DOM中删除

这样改完之后，不管你点击多少次Add按钮生成新的Remove按钮，点击它们都能正常移除对应的行啦！

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