Как связать родительский узел со всеми его дочерними элементами в прослушивателе событий? jQuery/JavaScript

Я не очень хорошо разбираюсь в JavaScript, так как я только кодировал как хобби чуть больше года, так что простите меня, если этот вопрос кажется глупым. Я также новичок в публикации в StackOverflow.

Во всяком случае, я пытаюсь поставить слушателя событий на динамически созданный элемент с дочерними узлами.

Пример:

<div>
 <div>
 Content in Div2
 </div>
 <div>
 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? Я знаю, что могу пройти через DIVs и сказать:

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

Однако у моего фактического кода много чего происходит, и это будет похоже на беспорядочный беспорядок. Есть ли более оптимальный способ сделать это?

Я чувствую, что мне не хватает чего-то очень простого

2 ответа

Поскольку ваши элементы создаются во время выполнения, они не будут доступны при регистрации событий для них в состоянии готовности, так что в этом контексте вам необходимо использовать делегирование событий

Пытаться,

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

И в приведенном выше коде я использовал атрибут, начинающийся с селектора, так что вы можете легко выбрать элементы, имена классов которых начинаются с div, и записывать события для одного и того же.


Если вы хотите, чтобы div с классом "div" был доступен для клики вместе со всем, что внутри него, вам просто нужно сделать:

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

Вышеуказанное сделает контейнер div и все внутри кликабельными.

Если вы хотите, чтобы все div внутри внутри были только кликабельными, вы должны сделать следующее:

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

Здесь JSFiddle, чтобы продемонстрировать: http://jsfiddle.net/simonlevasseur/82m9Y/

licensed under cc by-sa 3.0 with attribution.