为什么“：第一个”在jquery中.on（）选择器不总是工作？

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>"); 

在这种情况下，点击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中的所有按钮（通过在按钮类之后省略：first），那么它可以用于早期版本的jQuery。因此，在您的jsfiddle示例中，您选择了jQuery 1.7.2，但您必须至少切换到1.8.3版本。

希望能回答您的问题。