pre시에 클릭 이벤트 발령

Question

<ul> 
    <li>Hello..</li> 
</ul> 

$('input').click(function(){ 
    $('ul').prepend($('<li>Another Hello...</li>').click()); // not working [1] 
    $('ul').prepend('<li>This is hello appending...</li>').children(':first').click(); // this is working [2] 
}); 

$('ul li').live('click', function(){ 
    console.log('New li clicked...'); 
}); 

[1] 코드 스 니펫이 작동하는 이유는 무엇입니까? 동일한 작업을 해결할 수있는 다른 방법이 있습니까? prepend()에 클릭 이벤트를 발생시키고 싶습니다.

N.B : 여기 prependTo() 사용하지만, 가능 prepend()를 사용하여 같은 일을 할 것입니다 수 있습니다.

Answer 1

새 요소 인 $('<li>Another Hello...</li>')은 아직 DOM 트리 (문서)의 일부가 아니므로 .live()으로 묶인 이벤트 처리기를 시작하기 위해 이벤트를 버블 링 할 수 없습니다.

.live() 이벤트가 이므로 이벤트 처리기를 문서 루트에 바인드하고 작동합니다. 즉, 이벤트가 발생한 요소의 이벤트 처리기가 먼저 호출되고 부모의 이벤트 처리기가 호출되어 모든 상위 항목에 대해 문서 루트에 도달 할 때까지 발생합니다.
그러나 요소가 문서에 추가되지 않은 경우 부모 노드가 없으므로 이벤트를 버블 할 수 없습니다.

대신 .prependTo()^[docs]을 사용할 수

$('<li>Another Hello...</li>').prependTo('ul').click();