为什么jquery .on（）选择器中的“：first”并不总是有效？

Question

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

<div></div>

然后我在第一个'.button'子元素上绑定click事件：

$('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/

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

Answer 1

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

请尝试使用:first-child。

Answer 2

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

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

// ..same code

Answer 3

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

希望能回答你的问题。