在Web前端开发中，操作DOM是家常便饭。随着单页应用和异步交互的普及，我们经常需要通过AJAX请求后端数据，然后动态生成列表项或按钮插入到页面中。然而，很多开发者发现，这些后来加入文档流的DOM节点，明明有着相同的类名，却无法触发之前写好的点击事件。这种现象的根本原因在于事件绑定的时机与DOM渲染的时机不匹配。要解决这个痛点，我们需要借助事件委托思想，而jQuery提供的on方法正是实现这一思想的最佳工具。
为什么直接绑定事件对动态元素无效？
当我们使用早期jQuery的click方法或bind方法为元素绑定事件时，底层逻辑是在代码执行的那一刻，遍历当前DOM树中所有匹配该选择器的元素，并逐个为其附加事件监听器。这就意味着，只有当代码执行时已经存在于页面中的元素才能获得事件处理能力。
如果此时页面还没有加载完成后续的异步数据，或者用户点击某个按钮后才动态创建新的节点，这些新节点并没有被纳入之前的遍历范围。因此，它们身上没有绑定任何事件监听函数，点击它们自然毫无反应。这种静态绑定的方式在面对高度动态化的现代Web应用时显得力不从心，每次插入新元素后都需要重新调用绑定方法，不仅代码冗余，而且极易出错。
<button id="add-btn">添加新列表项</button>
<ul id="list">
<li class="item">旧的列表项 - 点击我</li>
</ul>
<script>
// 这种写法对动态添加的li无效
$('.item').click(function() {
alert('被点击了');
});
$('#add-btn').click(function() {
$('#list').append('<li class="item">新的列表项 - 点击我失效</li>');
});
</script>在上述代码中，页面加载时只有一条li项，click事件成功绑定到了它身上。但是当用户点击按钮追加新的li项时，由于新元素是在click事件绑定之后才创建的，所以新元素无法触发弹窗。这就是典型的直接绑定失效场景。
事件委托的底层逻辑与冒泡机制
要理解事件委托，首先需要弄懂DOM事件模型中的冒泡机制。当一个元素上的事件被触发时，该事件会沿着DOM树向上传播，依次触发其祖先元素的同类事件，直到到达文档根节点。这就像水底的气泡不断向上浮起一样，事件也会层层上报。
利用这个特性，我们不需要把事件直接绑定到目标元素本身，而是绑定到它某个已经存在的父级元素上。当用户点击了子元素，点击事件会冒泡到父级元素。父级元素的事件监听器在捕获到事件后，可以通过检查事件对象的目标属性，判断出这个事件究竟是由哪个具体的子元素触发的。
如果触发事件的子元素符合我们预设的条件，父级元素就可以代为执行相应的处理逻辑。这种将子元素的事件委托给父级元素管理的模式，就是所谓的事件委托。它完美避开了动态元素未被注册监听的问题，因为父级元素在代码执行时就已经存在了，无论后续增加多少个子元素，只要它们在这个父级元素内部，触发的事件都会冒泡到父级容器。
使用.on()方法实现经典事件委托
在jQuery中，on方法是实现事件委托的标准接口。它的核心语法是将事件类型和选择器作为参数传递。与直接绑定不同，委托绑定的选择器是作为on方法的第二个参数传入的，它告诉父级容器：只有当事件是由匹配该选择器的子元素触发时，才执行回调函数。
这种写法的精妙之处在于，无论子元素是页面加载时就存在的，还是之后通过脚本动态插入的，只要它们在DOM树中是父级容器的后代，并且类名匹配，点击事件就能正确冒泡并被父级捕获处理。这极大地提升了代码的健壮性，让我们无需关心DOM元素的生成时机。
// 正确的事件委托写法
// 将事件绑定到已存在的父级 #list 上，并过滤出 .item 子元素
$('#list').on('click', '.item', function(e) {
alert('委托成功，被点击的元素内容是：' + $(this).text());
});
// 此时动态添加的元素也能响应点击事件
$('#add-btn').click(function() {
$('#list').append('<li class="item">新的列表项 - 点击我生效</li>');
});除了支持动态元素外，on方法的事件委托还能带来显著的性能提升。假设页面上有一个包含几百个表格行的列表，如果为每一行都绑定点击事件，会创建几百个事件监听器，占用大量内存。而使用事件委托，我们只需要在表格容器上绑定一个监听器，通过冒泡统一处理所有行的点击事件，内存开销大幅降低。需要注意的是，用于过滤的子元素选择器应尽量简单，比如直接使用类名，避免使用过于复杂的层级选择器，以免在事件冒泡时增加不必要的DOM查询与匹配计算成本。
jQuery动态加载事件委托on方法修改时间：2026-08-23 21:15:39