JQuery事件委托困惑：动态生成元素点击事件失效

嘿，我来帮你搞定这个问题！你遇到的核心问题是动态生成的元素无法触发已绑定的事件，另外代码里还有个容易忽略的选择器错误，我一步步给你拆解：

问题分析 #

1. 选择器语法错误：你写的$("slick")和$("box")是在选择<slick>、<box>标签，但你的元素是带类名的div，必须用类选择器（加.），也就是$(".slick")和$(".box")。
2. 事件绑定方式不对：直接给.slick绑定click事件，只能作用于绑定事件时已经存在于DOM中的元素。动态生成的元素是之后才添加的，不会自动继承这个事件绑定。这时候需要用事件委托来解决。

解决方案 #

事件委托的思路是：把事件绑定到一个始终存在的父元素（比如document，或者更接近的静态容器），然后指定触发事件的目标元素选择器。这样不管元素是一开始就有的，还是后来动态生成的，只要匹配选择器，就能触发事件。

修正后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.box {
  background-color: red;
  padding: 3px;
  margin: 4px;
  height: 20px;
  width: 60px;
}
.slick {
  background-color: #B2B2B2;
  padding: 3px;
  margin: 4px;
  height: 10px;
  width: 40px;
}
#button, #button1 {
  background-color: #BCBCBC;
  padding: 3px;
  width: 90px;
  margin: 7px;
  cursor: pointer;
}
</style>

<div class="box"></div>
<div class="slick"></div>
<div class="box"></div>
<div class="slick"></div>
<div id="button">New Tab</div>

<script>
var counter = 0;
$("#button").click(function() {
  // 修正选择器：.slick 而非 slick
  $(".slick").last().after("<div class='box'></div><div class='slick'></div>")
});

// 使用事件委托绑定点击事件
$(document).on("click", ".slick", function() {
  // 修正选择器：.box 而非 box
  $(".box").css("background-color", "blue");
});
</script>

关键修改点说明 #

• 把$("slick").on("click", ...)改成$(document).on("click", ".slick", ...)：将事件绑定到document，当点击事件冒泡到这里时，会检查触发事件的元素是否匹配.slick，匹配就执行回调。
• 所有类选择器都加上了.：确保正确选中目标元素。

这样修改后，不管你点击原来的还是动态生成的.slick元素，所有.box的背景色都会变成蓝色，而且完全不需要调整元素的层级结构，符合你的要求。

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