我正在尝试使用嵌套 div 和基本 jQuery 编写这首诗。我的想法是从一个 .active 类的 div 开始，该 div 具有 display: block，所有其他 div 都是第一个 div 的子元素，
我正在尝试使用嵌套 div 和基本 jQuery 编写这首诗。我的想法是从一个 .active 具有 的类的 display: block ，所有其他 div 都是第一个具有 的 的子级 div 。 display: none 现在，当您单击第一个 时 div ，它会从自身中删除类 .active （向自身添加 .static 现在仅改变颜色的类）并添加 .active 到其子级。实际上，子级 div 变得可见。然后您单击该子级以显示其子级，依此类推，直到诗歌结束：
$(".active").click(function() {
$(this).removeClass("active").addClass("static");
$(this).children("div").addClass("active")
});
脚本加载时，DOM 中 .active 仅存在第一个 div 的类 https://jsfiddle.net/4ygfrtgb/1/
我尝试过这样的事件委托：
$("div").on("click", ".active", function() {
$(this).removeClass("active").addClass("static");
$(this).children("div").addClass("active");
});
但是，即使是第一个元素 div 对点击也没有反应。我知道委托对元素的子元素起作用，而我试图调用同一元素的类。
那么有没有办法通过在 DOM 加载后添加的类来定位元素？
非常感谢。
您没有正确执行事件委托... 在此处 .
在事件委托中，您将点击处理程序附加到父元素，并添加目标子元素选择器以响应该事件。 在本例中，您将它附加到目标元素本身。
将点击处理程序附加到第一个元素的父元素 div （您可能希望更具体，而不是使用 body ）。
$("body").on("click", "div.active", function() {
$(this).removeClass("active").addClass("static");
$(this).children("div").addClass("active");
});
更新了 JSFiddle 以显示其有效： https://jsfiddle.net/4ygfrtgb/2/ .