具有標籤元素的toggleClass的奇怪行爲

Question

今天早些時候，我回答了this question。問題在於使用jQuery在一個label元素上切換一個類。考慮下面的HTML：

<label id="test">Test <input type="checkbox"></label> 

而下面的jQuery：

$("#test").click(function() { 
    $(this).toggleClass("testClass"); 
}); 

當我點擊label我期望testClass類被應用到該元素（因爲它不具有當頁面加載時）。然而，沒有任何反應。親自看看吧here。我沒有在IE中試過，但在Chrome或Firefox中無法正常工作。我相信它可以在IE中從與之前相關的問題中起作用。

單步穿過toggleClass method in the jQuery source，似乎發生的事情是類被添加並立即刪除。

如果移動input元素label之外，預期該類補充說：

<label id="test" for="cb">Test</label> 
<input type="checkbox" id="cb"> 

你可以看到在行動here那一個。所以，我的問題是爲什麼第一個例子不會在第一次點擊時添加類？我錯過了明顯的東西嗎？

Answer 1

看起來問題源於這樣的事實：當您嵌套input元素時，click事件被觸發兩次（因此無效切換）。我沒有在所有瀏覽器上測試過，但這似乎發生在FF8中。在該示例中，標籤上

嘗試點擊：http://jsfiddle.net/cRnJS/

顯然，點擊label元件觸發在其相關input一個click事件（這就是爲什麼的選中/清除工程）和此事件的氣泡向上因此觸發它第二次在父母label。