在使用jQuery开发动态列表功能时，我们经常会遇到这样的场景：页面初始加载时存在的列表项，其移除按钮可以正常点击删除，但通过代码动态新增的列表项的移除按钮点击后没有任何反应，这就是典型的动态列表移除按钮失效问题。
问题产生的原因
这个问题的核心原因是jQuery的事件绑定时机和动态元素的生成时机不匹配。当我们使用click()方法直接给元素绑定事件时，jQuery只会对当前已经存在于DOM中的元素绑定事件，后续动态生成的元素不会自动获得这个事件绑定。
比如下面的错误写法，就只会对初始的列表项生效：
// 错误示例：直接绑定事件
$(function() {
// 只绑定当前已有的.remove-btn元素的点击事件
$('.remove-btn').click(function() {
$(this).parent().remove();
});
// 动态新增列表项
$('#add-btn').click(function() {
$('#list').append('<li>动态项<button class="remove-btn">移除</button></li>');
});
});
正确的解决方案：使用事件委托
事件委托是利用事件冒泡的原理，把事件绑定到父元素或者更外层的静态元素上，当子元素触发事件时，事件会冒泡到父元素，父元素通过判断触发事件的元素是否符合选择器条件，来执行对应的逻辑。这样即使子元素是动态生成的，只要父元素存在，事件就能正常触发。
jQuery中提供了on()方法来实现事件委托，语法格式为：父元素.on(事件类型, 子元素选择器, 事件处理函数)。
完整实现代码
下面是修复后的完整代码示例，动态新增的列表项移除按钮也可以正常生效：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态列表移除示例</title>
<script src="https://ipipp.com/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="add-btn">新增列表项</button>
<ul id="list">
<li>初始项1<button class="remove-btn">移除</button></li>
<li>初始项2<button class="remove-btn">移除</button></li>
</ul>
<script>
$(function() {
// 正确写法：使用on()做事件委托，把点击事件绑定到静态父元素#list上
$('#list').on('click', '.remove-btn', function() {
// 找到当前按钮的父元素li，然后移除
$(this).parent().remove();
});
// 动态新增列表项
$('#add-btn').click(function() {
$('#list').append('<li>动态新增项<button class="remove-btn">移除</button></li>');
});
});
</script>
</body>
</html>
两种绑定方式的对比
我们可以通过下面的表格更清晰地看到两种绑定方式的差异：
| 绑定方式 | 适用场景 | 动态元素支持 | 性能表现 |
|---|---|---|---|
click()直接绑定 | 静态存在的元素 | 不支持 | 元素多时绑定次数多，性能略低 |
on()事件委托 | 静态或动态元素 | 支持 | 只绑定一次父元素事件，性能更优 |
注意事项
- 事件委托的父元素必须是页面加载时就已经存在的静态元素，不能是动态生成的。
- 子元素选择器要准确匹配需要触发事件的元素，避免误触发其他元素的事件。
- 如果动态列表会被整体替换，需要重新绑定事件委托，或者把事件委托绑定到更外层的静态容器上。
通过上述的事件委托方案，就可以彻底解决jQuery动态列表移除按钮失效的问题，这个思路也适用于其他动态生成元素的事件绑定场景，比如动态表格的编辑、删除按钮等。