如何为动态生成父元素的子元素绑定jQuery点击事件？

我来帮你排查这个动态生成的.sound-toggle元素点击事件失效的问题～

首先你用事件委托的思路是完全正确的，但两种写法都没生效，大概率是遇到了以下几个常见坑，我们一步步来排查：

1. 先确认jQuery是否正常工作 #

先打开浏览器控制台，输入jQuery回车，如果返回undefined，说明你的jQuery没有正确加载，或者加载顺序在你的代码之后。要确保jQuery脚本在你的事件绑定代码之前引入页面。

如果页面里同时用了其他库（比如Prototype）导致$冲突，但你用了jQuery前缀，这部分应该没问题，但也可以测试下：

console.log(jQuery.fn.jquery); // 能输出jQuery版本号就说明正常

2. 检查事件冒泡是否被阻止 #

事件委托依赖事件冒泡到委托的父元素（比如你用的document），如果.sound-toggle的父元素（比如.video-post、.post-container甚至外层的article）里有其他事件处理函数调用了event.stopPropagation()或者return false，就会导致事件没法冒泡到document，委托自然失效。

你可以修改绑定代码，加上事件对象的打印，同时阻止后续冒泡干扰：

jQuery(document).on("click", ".sound-toggle", function(e) {
  e.stopPropagation(); // 避免父元素事件干扰
  console.log("点击触发了！", this);
  console.log("当前元素class：", jQuery(this).attr("class"));
});

如果还是没输出，就去检查父元素的事件代码，看看有没有阻止冒泡的逻辑。

3. 尝试用更接近的父容器做委托 #

用document做委托虽然通用，但层级太高容易受其他代码干扰。如果这些动态生成的article都有一个固定的父容器（比如假设所有帖子都放在#posts-wrapper里），可以把委托绑定到这个更接近的容器上：

jQuery("#posts-wrapper").on("click", ".sound-toggle", function() {
  console.log("clicked");
});

这种方式不仅更高效，还能避免全局层级的事件冲突。

4. 检查元素是否被遮挡或样式限制 #

有时候视觉上能看到元素，但实际上被其他元素覆盖了，或者元素设置了pointer-events: none样式，导致点击事件无法触发。

打开浏览器开发者工具，选中.sound-toggle元素：

• 查看Elements面板的Styles标签，确认没有pointer-events: none
• 在Elements面板右键选择Inspect Element，看高亮区域是否和视觉位置一致，有没有其他元素在它上方

5. 备选方案：元素生成后直接绑定 #

如果上述方法都不行，你可以在动态生成article元素的代码里，在元素插入DOM之后立即绑定事件：

// 假设你生成article的代码大概是这样
var $newArticle = jQuery(`<article id="randomly-generated-Id">
  <div class="post-container">
    <div class="post-view video-post">
      <video preload="auto">
        <source src="foo" type="video/mp4">
        <source src="foo" type="video/webm">
      </video>
      <div class="sound-toggle off"></div>
      <p class="length">0:43</p>
      <div class="presenting"><span class="play">Play</span></div>
    </div>
  </div>
</article>`);

// 插入DOM后立即绑定事件
$newArticle.find(".sound-toggle").on("click", function() {
  console.log("clicked");
});

// 最后把元素加到页面里
jQuery("body").append($newArticle);

这种方式直接绑定到元素本身，不需要依赖事件冒泡，适合能控制元素生成时机的场景。

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