8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. jquery
  3. jQuery：如何使用添加到嵌套 div 的类的事件委托？

jQuery：如何使用添加到嵌套 div 的类的事件委托？

kluszon 2月前
33 0

我正在尝试使用嵌套 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 加载后添加的类来定位元素？

非常感谢。

帖子版权声明 1、本帖标题：jQuery：如何使用添加到嵌套 div 的类的事件委托？
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由kluszon在本站《jquery》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    您没有正确执行事件委托... 在此处 .

    在事件委托中，您将点击处理程序附加到父元素，并添加目标子元素选择器以响应该事件。 在本例中，您将它附加到目标元素本身。

    将点击处理程序附加到第一个元素的父元素 div （您可能希望更具体，而不是使用 body ）。 

    $("body").on("click", "div.active", function() {
  $(this).removeClass("active").addClass("static");
  $(this).children("div").addClass("active");
});

    更新了 JSFiddle 以显示其有效： https://jsfiddle.net/4ygfrtgb/2/ .

  • 引用 3楼

    确实有效！我将所有内容放入 #wrapper div 中，以避免 body 上发生事件。我可以再次利用您的专业知识吗？我的第二个想法是能够通过单击 .static 从任何级别折叠诗歌，这将从单击的 div 的所有子级中删除任何可见类。我又把它弄坏了：jsfiddle.net/4ygfrtgb/3 为什么？我不能将两个不同的事件委托给同一父级内的两个不同类吗？非常感谢！

  • 引用 4楼

    可以，但它们可能会互相干扰，因此您必须使用 event.stopPropagation() 来阻止事件传播到父元素。已再次修复 JSFiddle 以满足您的下一个要求：jsfiddle.net/yangshun/4ygfrtgb/4

  • 引用 5楼

    你是最棒的！！！：D 非常感谢！我记得那门课上的 stopPropagation()，tryjQuery，但我想，我什么时候需要用到它？现在我们在这里……我的 jQuery 教育开始慢慢地有了进展。我会阅读冒泡和捕获。再次感谢！

  • 引用 6楼

    非常欢迎您！^_^ 我的建议是不要对诗歌的后续行使用父子关系。兄弟关系会更好（而且您不必添加任何代码来阻止事件传播）。子诗行目前也随着深度的增加而缩进，兄弟关系会阻止这种情况发生。

  • cj- 2月前 0 只看Ta
    引用 7楼

    哈！这也是我的第一个想法，尤其是在这种混乱中跟踪结束标签让我头疼。但问题是，这只是这首诗的一个分支。我使用兄弟元素来显示一行中的两个 div。然后你只需单击一个，就可以转到它的子元素——一首完全不同的诗。就像选择你自己的冒险。但也许我可以反转我的设计，使用子元素来表示那些十字路口。我会弄清楚并在这里发布完成的诗歌！:D

返回
作者最近主题：