레이블 요소가있는 toggleClass의 이상한 동작

Question

오늘 오늘 나는 this question으로 대답했습니다. 질문은 label 요소의 클래스를 jQuery로 토글하는 것에 관한 것입니다.

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

그리고 다음 jQuery를 : 나는 label 클릭하면

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

내가 (이 것을하지 않는 한 testClass 클래스는 해당 요소에 적용 할 기대할 수있는 다음과 같은 HTML을 고려 클래스가로드 될 때). 그러나 아무 일도 일어나지 않습니다. 직접보기 here. Internet Explorer에서 시도하지는 않았지만 Chrome이나 Firefox에서 제대로 작동하지 않습니다. 나는 그것이 이전에 링크 된 질문에서 IE에서 작동한다고 믿습니다.

toggleClass method in the jQuery source을 따라 가면서 클래스가 추가되고 곧바로 제거됩니다. 당신이 label의 외부 input 요소를 이동하는 경우 예상대로

는, 클래스가 추가됩니다 : 당신은 행동 here에 하나를 볼 수 있습니다

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

. 그래서, 내 질문은 왜 첫 번째 예제는 첫 번째 클릭에 클래스를 추가하지 않는 것입니까? 나는 뻔뻔스럽게 명백한 것을 놓치고 있습니까?

Answer 1

중첩 된 input 요소가있을 때 click 이벤트가 두 번 트리거 (따라서 토글을 무효화)한다는 사실에 기인합니다. 필자는 모든 브라우저에서이 기능을 테스트하지는 않았지만 FF8에서 이러한 현상이 발생합니다. 이 예에서의 라벨에

시도에 클릭 : http://jsfiddle.net/cRnJS/

명백하게, label 요소 클릭은이 이벤트 거품 위쪽 따라서 그것을 트리거 (체크인/체크 해제 작동이 이유) input 관련된 자사의 click 이벤트를 트리거 부모의 두 번째 시간은 label입니다.