如何在事件偵聽器中將父節點與其所有子節點相關聯？ jQuery/JavaScript

我對JavaScript的使用並不是非常好，因爲我現在只在一年多的時間裏作爲一個愛好編寫代碼，所以請原諒我，如果這個問題看起來很愚蠢。我也是新來發布在StackOverflow這裏。如何在事件偵聽器中將父節點與其所有子節點相關聯？ jQuery/JavaScript

無論如何，我想把一個事件監聽器放在一個動態創建的具有子節點的元素上。

實施例：

<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 
    } 
});

但是我實際的代碼有很多的東西，怎麼回事，它看起來像一個混亂的爛攤子。有沒有更好的方法去解決這個問題？

我覺得我失去了一些東西很簡單

來源

2014-03-03 Baldstrom

http://learn.jquery.com/events/event -delegation/ –

由於在運行時創建的元素，他們將無法使用，而登記在就緒狀態爲他們的活動，所以在這種情況下，你必須使用event delegation

嘗試，

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

而在上面的代碼中，我已經使用attribute starts with selector，這樣你可以很容易地選擇一個類名的div開始其具備的要素和寫入的事件一樣。

來源

2014-03-03 05:19:55

不允許我們爲動態生成的元素使用特定的類名稱並綁定事件嗎？ –

@RachitDoshi是的，我們可以做到這一點，但OP的要求有點不同。 –

如果你想與類「格」的股利是一切沿着點擊裏面，那麼你只需要做：

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

以上會使裏面點擊的div容器和一切。

如果你想只裏面所有div被點擊，那麼你這樣做：

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

這裏有一個的jsfiddle證明：http://jsfiddle.net/simonlevasseur/82m9Y/

來源

2014-03-03 05:35:10

如何在事件偵聽器中將父節點與其所有子節點相關聯？ jQuery/JavaScript

回答

相關問題