为什么 jquery .on() 选择器中的":first"并不总是有效？

Question

我有一个特殊的场景，需要将事件动态绑定到具有特定类的第一个子元素上。例如，我有一个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>");

在这种情况下，当点击按钮1时，它将弹出警报窗口。Button2不会。这是正确的，。。。直到我把一个".button"元素放在div.的顶部

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

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

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

Answer 1

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

请尝试使用:first-child。

Answer 2

jQuery的更高版本将处理此问题。请在此处查看已修复的错误。

检查 (将jQuery版本更改为1.8.3(。

// ..same code

Answer 3

如果使用：first或：last伪属性，则它仅适用于jQuery 1.8.3或更高版本。如果您希望所有按钮都在div中(通过省略按钮类后面的：first(，那么它可以与早期版本的jQuery一起使用。因此，在您的jsfiddle示例中，您选择了jQuery 1.7.2，但您必须切换到1.8.3版本的

希望这能回答你的问题。