Question

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

但是，每次我在super div中单击时，只有super div会触发一个click事件。儿童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');
});

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

这也会触发孩子的点击事件（因为当然他们有相同的课程），而你需要点击父母。

所以你可以做这样的事情，这将是一个更好的做法

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

多数民众赞成......然后你将来不会搞砸你的代码

修改

现在您在下面的评论中使用了双重类和LinkinTED 个状态：您可以执行$(.child.clickable)和$('.super.clickable')之类的操作来区分父母和子女的事件，但实际上可以说这使你的班级clickable毫无用处。 因此，如果您想在其上附加事件，关键就是避免嵌套相同的类。

Answer 3

对于那些您不了解（或不关心）孩子的情况，您可以尝试：

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

或者，使用jQuery＆＃39; .children()方法：

$(".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

然后你不需要知道这些孩子的名字。你基本上可以直接访问它们。

onclick选择子元素

3 个答案: