爲什麼「：第一個」在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版本。

希望能回答您的問題。