在前端开发中，经常需要使用 jQuery 进行 DOM 操作和事件绑定。其中一个常见需求是通过 append() 方法动态添加元素，并对这些动态添加的元素进行事件绑定。但是有时候我们会遇到这样的问题：使用 on() 绑定的事件却不起作用。本文将介绍这个问题的原因和解决方案。
问题描述
假设我们有一个按钮：
<button class="btn">点击我</button>
现在我们想通过 jQuery 动态添加一个 div 元素，并为其内部的另一个按钮绑定一个点击事件：
$('.btn').click(function () { $('body').append('<div class="box"><button class="inner-btn">内部按钮</button></div>'); }); $('.inner-btn').on('click', function () { console.log('点击了内部按钮'); });
然而，当我们点击按钮并尝试点击新添加的按钮时，会发现事件并没有生效。
问题原因
这个问题的根本原因在于，我们在绑定事件时仅仅针对已存在的元素进行了绑定，而并没有考虑到新添加的元素。具体来说，我们在代码中使用了两种事件绑定方式：
$('.btn').click(function () { // 绑定方式 1 // ... }); $('.inner-btn').on('click', function () { // 绑定方式 2 // ... });
第一种方式是直接使用 jQuery 的方法为已存在的元素绑定事件，这种方式在静态 HTML 页面中非常常见。但是，当我们使用 append() 方法动态添加元素时，新添加的元素并不会自动继承已有元素绑定的事件。
第二种方式则是使用 on() 方法进行事件委托，它可以在目标元素还不存在时就对其绑定事件。但是，这种方式的正确使用需要结合事件冒泡机制和选择器编写技巧，否则也会产生类似的问题。
因此，我们需要引入新的思路来解决这个问题。
解决方案
针对这个问题，我们可以采用以下两种方式来解决：
方案一：使用委托绑定
我们可以将事件绑定到已经存在且不会被删除的祖先元素上，然后通过传递给处理程序的事件对象确定是否发生在我们感兴趣的子元素上。例如，在本例中，我们可以将事件绑定到 body 元素上：
$('body').on('click', '.inner-btn', function () { console.log('点击了内部按钮'); });
这样，无论何时单击 .inner-btn 元素，都会冒泡到 body 元素并触发绑定的事件。
方案二：在 append() 方法中添加事件
另一种解决方案是，在使用 append() 方法时直接为新元素添加事件处理程序。例如：
$('.btn').click(function () { var $newBox = $('<div class="box"><button class="inner-btn">内部按钮</button></div>'); $newBox.find('.inner-btn').on('click', function () { console.log('点击了内部按钮'); }); $('body').append($newBox); });
这样，每当我们使用 append() 添加新元素时，都会为其内部的 .inner-btn 元素添加点击事件，从而解决了问题。
示例代码
完整示例代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- -------- --------------------- ------- ---------------------------------------- - ---------------------------------------------------------- -------- --------------------------------------------------------------------------------展开代码
