javascript - 如何在事件监听器中将父节点与其所有子节点相关联？ 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

由于您的元素是在运行时创建的，因此在为它们注册处于就绪状态的事件时它们将不可用，因此在这种情况下您必须使用 event delegation

尝试，

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

在上面的代码中，我使用了 attribute starts with selector , 这样您就可以轻松选择类名以 div 开头的元素并为其编写事件。