onclick select child element

Question

У меня есть div, который может иметь много дочерних элементов. Этот супер-div имеет класс .clickable, а дочерние div также имеют класс .clickable. У меня также есть обработчик события .click для чего-либо с классом .clickable.

Однако каждый раз, когда я нажимаю внутри супер-div, только супер-div получает событие щелчка. Детские divs никогда не нацелены. Как мне обойти это?

html 
<div class="super clickable"> 
<div id="child-1" class="child clickable"></div> 
<div id="child-2" class="child clickable"></div> 
</div> 

js 
$('.clickable').click(function() { 
$(this).css('border', '1px solid red'); 
}); 

Answer 1

Вы можете использовать child selector > для того, чтобы выбрать прямые .clickable элементы внутри .clickable элементов:

$('.clickable > .clickable').click(function() { 
$(this).css('border', '1px solid red'); 
}); 

Answer 2

даже если есть хороший ответ на josh, я бы сказал, не используют одни и те же классы, чтобы вызвать разные Мероприятия.

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

почему:

Вы использовали .clickable для обоих родителей и ребенка, так что я предположим, вам потребуется дополнительно связать другое событие для родителя.

Смотреть это:

$('.clickable > .clickable').click(function() { 
$(this).css('border', '1px solid red'); 
}); 

Это будет работать как шарм, но рассмотреть возможность того, что вам требуется, чтобы добавить еще одно событие для родительского DIV себя, и вы делаете что-то вроде

$('.clickable ').click(function() { 
// make some operation on parent 
}); 

Этот также инициирует событие click для детей (из-за того, что они имеют один и тот же класс), в то время как вам нужен родительский клик.

Таким образом, вы можете сделать что-то подобное, что было бы лучшей практикой

<div class="super"> // removed the clickable class from parent 
<div id="child-1" class="child clickable"></div> 
<div id="child-2" class="child clickable"></div> 
</div> 

js 
$('.clickable').click(function() { 
$(this).css('border', '1px solid red'); 
}); 

Вот это .. и тогда вы будете не испортит ваш код в будущем

Edit:

Теперь, когда вы использовали двойные классы, а как LinkinTED в следующем сообщении: вы можете сделать что-то вроде $(.child.clickable) и $('.super.clickable'), чтобы различать события для родителя и детей, но, честно говоря, это делает ваш класс clickable бесполезным. Таким образом, ключ - это просто избежать вложенности тех же классов, если вы хотите присоединить к ним события.

Answer 3

Для тех случаев, когда вы не знаете (или не заботятся), которые дети, вы можете попробовать:

$(".super div").click(function() { 
    // do stuff 
}); 

Или, используя метод .children() JQuery в:

$(".super").children().click(function() { 
    // do stuff 
}); 

И если вы должны быть ориентированы на конкретный дочерний элемент:

// targets second child element 
$(".super div").eq(2).click(function() { 
    // do stuff 
}); 

could also do $(".super div:first") or $(".super div:last") 
or even $(".super div:last-child") depending on your needs 

Тогда вы не урожденной d знать, что назвали дети. Вы напрямую обращаетесь к ним напрямую.