jQuery无法检测动态追加元素的点击事件问题求助

问题根源 #

你当前使用的$("#target h1").click(...)属于直接事件绑定，只会在代码执行阶段，为当时已经存在的DOM元素（也就是页面初始渲染的<h1>）绑定点击事件。后续通过append动态生成的<h1>，在绑定代码执行时还未被创建，因此不会被绑定事件，点击自然无响应。

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

通过jQuery的.on()方法实现事件委托，把事件绑定到已存在的父级元素上，利用DOM事件冒泡机制，覆盖所有当前及未来添加的目标子元素。

修正后的index.js代码：

$(document).ready(function() {
  $("button").click(function() {
    $("#target").append(`<h1>Will be called now</h1>`);
  });

  // 事件委托：绑定到已存在的父元素#target，监听子元素h1的点击事件
  $("#target").on("click", "h1", function() {
    alert("clicked");
  });
});

原理说明 #

• 事件委托将事件绑定到一个已经存在的父元素（这里选择#target，是离目标元素最近的稳定父级），当任何子元素（包括后续动态添加的<h1>）触发点击事件时，事件会向上冒泡到父元素。
• 父元素会判断触发事件的元素是否匹配指定的选择器（h1），如果匹配则执行回调函数，这样就能实现初始和动态元素的点击行为一致。

注：也可以将委托对象换成document，但优先选择离目标元素最近的已存在父元素，能减少事件冒泡的层级，提升性能。

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