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