如何在事件侦听器中将父节点与其所有子节点相关联？ jQuery / JavaScript

Question

我对JavaScript并不是特别擅长，因为我只是将编码作为一种兴趣才一年多，所以如果这个问题看起来很愚蠢，请原谅我。 我也是在StackOverflow上发布的新手。

无论如何，我试图将事件侦听器放在具有子节点的动态创建的元素上。

例：

<div class="div">
    <div class="div2">
         Content in Div2
    </div>
    <div class="div3">
         Content in Div3
    </div>
    Content in Div
</div>

那就是HTML设置。 对于JavaScript（如果有更好的处理方法，我也使用jQuery），我正在使用此代码（因为元素是动态生成的）：

document.querySelector('body').addEventListener('click',function(e){
    if (e.target.className === "div"){
        //Run this code
    }
});

但是，即使单击div2和div3 ，我也想运行该代码怎么办？ 我知道我可以遍历DIV并说：

document.querySelector('body').addEventListener('click',function(e){
    if (e.target.className === "div" || e.target.parentNode.className === "div"){
        //Run this code
    }
}); 

但是，我的实际代码中发生了很多事情，看起来像是一团糟。 有没有更好的方法来解决这个问题？

我觉得我缺少一些非常简单的东西

Answer 1

由于您的元素是在运行时创建的，因此在为就绪状态为其注册事件时将无法使用它们，因此在这种情况下，您必须使用事件委托

尝试，

$(document).on('click','[class^="div"]',function(){
 //your code here.
});

并且在上面的代码中，我使用了以selector开头的属性 ，因此您可以轻松地选择类名称以div开头的元素，并为其编写事件。

Answer 2

如果要使带有“ div”类的div及其内部的所有内容都可单击，则只需执行以下操作：

$('.div').on('click', function () {
    //DO SOMETHING
});

上面的代码将使容器div和其中的所有内容均可点击。

如果您只希望单击内部的所有div，则可以这样做：

$('.div div').on('click', function () {
    //DO SOMETHING
});

这是一个JSFiddle来演示： http : //jsfiddle.net/simonlevasseur/82m9Y/