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

Question

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

实施例。 （实际代码的缩写版本）

<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＆gt; .objective”但它仍然总是调用它。

Answer 1

你可以这样做：

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

将选择元素（.objective），它们包含在element.workItemRow

中