如何在事件偵聽器中將父節點與其所有子節點相關聯？ 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/