为什么 jquery .on() 选择器中的“：first”并不总是有效？答案

【问题标题】：Why ":first" in jquery .on() selector doesn't always work?为什么 jquery .on() 选择器中的“：first”并不总是有效？
【发布时间】：2013-03-19 05:03:17
【问题描述】：

我有一个特殊的场景需要在具有特定类的第一个子元素上动态绑定事件。例如我有一个 div：

<div></div>

然后我在它的第一个 '.button' 子元素上绑定点击事件：

$('div').on('click', '.button:first', function (event) {
    alert($(event.target).text());
});

并且子元素会在后面创建：

$('div').append(
    "<span class='button'>Button1</span>" +
    "<span class='button'>Button2</span>");

在这种情况下，当Button1被点击时，它会弹出警告窗口。 Button2 不会。没错，...直到我将一个“.button”元素放在 div 上。

<span class='button'>Outer Button</span>
<div></div>

然后单击 Button1 将永远不会触发警报窗口。代码在这里：http://jsfiddle.net/D2H92/

知道为什么这并不总是有效，以及如何解决它？干杯！

【问题讨论】：

标签： jquery event-handling

【解决方案1】：

:first 只获取与当前选择器匹配的第一个元素 - 在本例中，第一个匹配.button 的元素。即使事件绑定到 <div> 元素，这也不会使选择器只查看 div 的目标。

尝试改用:first-child。

【讨论】：

【解决方案2】：

更高版本的 jQuery 会处理这个问题。 See the fixed bug here。

Check it（将 jQuery 版本更改为 1.8.3）。

// ..same code

【讨论】：

是的，我注意到了，但不知道为什么。现在可能需要将 jQuery 代码升级到最新版本，仍然使用 1.7.2。非常感谢您的回答。

【解决方案3】：

如果你使用 :first 或 :last 伪属性，那么它只适用于 jQuery 1.8.3 或更高版本。如果您想要 div 中的所有按钮（通过省略按钮类之后的 :first），那么它适用于早期版本的 jQuery。因此，在您的 jsfiddle 示例中，您选择了 jQuery 1.7.2，但您必须至少切换到 1.8.3 版本

希望能回答您的问题。

【讨论】：