jQuery/CSS 后代选择器选择太多

Question

我的页面上有几个元素，其中一些包含在一个 div 中，其中包含一个我关心的类(在本例中为“workItemRow”)。我只希望具有类 workItemRow 的祖先的元素触发事件。问题是，每个元素都绑定(bind)到事件，而不仅仅是祖先元素。

例。 (实际代码的简化版)

<div class="workItemRow">
<select class="objective"></select>
</div>

<div>
<select class="objective"></select>
</div>

然后是我的 jQuery:

$('body').on('change', '.workItemRow .objective', function () {
   alert("Why isn't this working?");
});

每次我更改第二个 div(没有任何类的那个)中的选择时，该事件仍然被触发，我不明白为什么。我尝试将选择器更改为“.workItemRow > .objective”，但它仍然总是调用它。

Answer 1

你可以这样做:

$('body').on('change', '.workItemRow > .objective', function () {
   alert("Why isn't this working?");
});

将选择包裹在 element.workItemRow 中的元素(.objective)