jquery .on() selector의 ": first"가 항상 작동하지 않는 이유는 무엇입니까?

Question

특수한 시나리오를 사용하면 이벤트를 특정 클래스의 자식 요소 중 첫 번째 요소에 동적으로 바인딩해야합니다.

<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는 그렇지 않습니다. 그건 올바른, ... 때까지 내가 div 요소 위에 하나의 .button '요소를 넣을 때까지.

<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 (변화 1.8.3에 JQuery와 버전).

// ..same code 

Answer 3

: first 또는 : last 의사 속성을 사용하면 1.8.5 이상의 jQuery에서만 작동합니다. div 클래스 안에있는 모든 버튼을 원한다면 (버튼 클래스 다음에있는 :을 생략함으로써) 이전 버전의 jQuery에서 작동합니다. 그래서 jsfiddle 예제에서 jQuery 1.7.2를 선택했으나 버전 1.8.3 이상으로 변경해야합니다.

희망 사항은 귀하의 질문에 답변 해주었습니다.