javascript - onclick选择子元素

Question

我有一个可以有许多子元素的 div。这个 super div有一个.clickable类，子div也有一个.clickable类。我还有一个 .click 事件处理程序，用于处理 .clickable 类的任何内容。

但是，每次我在 super div 内单击时，只有 super div 才会触发单击事件。子 div 永远不会成为目标。我该如何解决这个问题？

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