jquery 直接绑定事件无法响应动态追加的 dom 元素，需改用事件委托（event delegation）方式，将监听器绑定到静态父容器，并指定目标子选择器，从而统一处理现有及未来新增的匹配元素。
jquery 直接绑定事件无法响应动态追加的 dom 元素，需改用事件委托（event delegation）方式，将监听器绑定到静态父容器，并指定目标子选择器，从而统一处理现有及未来新增的匹配元素。
在 jQuery 中，$("#target h1").click(...) 这类直接事件绑定仅作用于执行时已存在于 DOM 中的 <h1> 元素。当后续通过 .append() 动态插入新的 <h1> 时，这些新元素并未被绑定事件监听器，因此点击无响应——这是初学者常见的“事件丢失”问题。
正确解法是使用 事件委托（Event Delegation）：将事件监听器绑定到始终存在且不会被替换的父级元素（如 #target），并传入子元素选择器作为第二个参数，由 jQuery 在事件冒泡阶段判断 event.target 是否匹配该选择器。
✅ 正确写法（推荐）：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$(document).ready(function() {
// 动态添加元素
$("button").click(function() {
$("#target").append(`<h1>Will also be called</h1>`);
});
// 事件委托：监听 #target 内所有 h1（包括未来添加的）
$("#target").on("click", "h1", function() {
alert("clicked");
});
});? 关键要点：
- ✅ 父元素 #target 必须在页面加载时已存在（不能是动态创建的）；
- ✅ 第二个参数 "h1" 是委托选择器，支持任意合法 CSS 选择器（如 "h1.title"、".item"）；
- ✅ 事件类型（如 "click"）必须支持冒泡（click、mouseover 等均支持，但 focus、blur 需特殊处理）；
- ⚠️ 避免过度上移委托层级（如用 $(document).on("click", "h1", ...) 虽可行，但性能略低，且可能受其他脚本干扰）；
- ? 委托机制对 .remove() 或 .empty() 后重新添加的元素依然有效，无需重复绑定。
? 补充：若需在事件处理函数中访问当前点击的 <h1> 元素，this 指向的就是匹配的委托目标（即被点击的 <h1>），可直接使用 $(this).text() 或 this.textContent 获取内容。
通过事件委托，你就能确保所有 #target 下的 <h1> 元素——无论初始渲染还是运行时动态插入——都具备一致的交互行为，彻底解决动态元素事件失效问题。
