首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何将父节点与事件侦听器中的所有子节点关联?jQuery / JavaScript

如何将父节点与事件侦听器中的所有子节点关联?jQuery / JavaScript
EN

Stack Overflow用户
提问于 2014-03-03 05:17:25
回答 2查看 367关注 0票数 2

我对JavaScript不是很在行,因为我只是在一年多一点的时间里才把编码作为一种爱好,所以如果这个问题看起来很愚蠢,请原谅我。我也是在StackOverflow上发布这篇文章的新手。

无论如何,我正试图在一个动态创建的元素上放置一个事件侦听器,该元素具有子节点。

示例:

代码语言:javascript
代码运行次数:0
运行
复制
<div class="div">
    <div class="div2">
         Content in Div2
    </div>
    <div class="div3">
         Content in Div3
    </div>
    Content in Div
</div>

这将是HTML设置。对于JavaScript (我也在使用jQuery,如果有更好的方法来处理这个问题),我使用以下代码(因为元素是动态生成的):

代码语言:javascript
代码运行次数:0
运行
复制
document.querySelector('body').addEventListener('click',function(e){
    if (e.target.className === "div"){
        //Run this code
    }
});

但是,如果我希望在单击div2div3时运行该代码,怎么办?我知道我可以通过DIVs循环说:

代码语言:javascript
代码运行次数:0
运行
复制
document.querySelector('body').addEventListener('click',function(e){
    if (e.target.className === "div" || e.target.parentNode.className === "div"){
        //Run this code
    }
}); 

然而,我的实际代码中有很多东西在运行,看起来就像一堆乱七八糟的东西。有什么更好的方法来解决这个问题吗?

我觉得我错过了一些很简单的东西

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-03-03 05:19:55

由于您的元素是在运行时创建的,因此在注册处于就绪状态的事件时,它们将不可用,因此在此上下文中必须使用事件委托

试试看

代码语言:javascript
代码运行次数:0
运行
复制
$(document).on('click','[class^="div"]',function(){
 //your code here.
});

在上面的代码中,我使用了属性以选择器开始。,这样您就可以轻松地选择类名以div开头的元素,并为相同的事件编写事件。

票数 1
EN

Stack Overflow用户

发布于 2014-03-03 05:35:10

如果您希望类" div“的div与其内部的所有内容一起单击,则只需这样做:

代码语言:javascript
代码运行次数:0
运行
复制
$('.div').on('click', function () {
    //DO SOMETHING
});

上面的内容会使容器div和里面的所有东西都可以点击。

如果您只希望所有的div都是可点击的,那么您可以这样做:

代码语言:javascript
代码运行次数:0
运行
复制
$('.div div').on('click', function () {
    //DO SOMETHING
});

下面是一个要演示的JSFiddle:http://jsfiddle.net/simonlevasseur/82m9Y/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22139165

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档