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

Posted 2023-03-29

【中文标题】jQuery/CSS 后代选择器选择太多

【英文标题】：jQuery/CSS descendent selector selecting too much

【发布时间】：2012-04-10 21:05:34

【问题描述】：

我的页面上有几个元素，其中一些包含在一个带有我关心的类的 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 > .objective”，但它仍然总是调用它。

【问题讨论】：

它工作正常jsfiddle.net/8sREv

此代码是否在body 加载之前在head 中执行？请改用$(document).on...。

它被包裹在 $(document).ready...

你的 JS 没有问题，所以还有其他事情发生。是否有更高级别的 .workItemRow 类允许匹配，即使您不想要它？

我想通了。我应该提到，每次更改 div 时，都会创建一个没有“workItemRow”类的新 div。此外，刚刚更改的 div 会添加“workItemRow”类。我不认为在事件完成解决之前添加类作为更改的结果会发生，但显然它确实发生了。

【参考方案1】：

你可以这样做：

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

将选择包含在 element.workItemRow 中的元素（.objective）