Jquery - 모든 "a"태그에 델리게이트 바인드

Question

div의 링크를 클릭하면 jq click()을 차단하려고합니다.

HTML

<div id="all"> 
    <div id="test"> 
     <a href="http://google.de">google</a> 
    </div> 
</div> 

JS

$('#test').click(function() { alert('only when i click the div'); }); 

$('a').click(function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    $('body').append(e.target.href); 
});  

이 코드는 잘 작동하지만, 내 콘텐츠는 동적입니다 그래서는 delegate() 솔루션이 필요합니다.

아래의 코드는 작동하지 않습니다. 하지만 왜? 뭐가 문제 야?

$('#all').delegate("a", "click", function(e) 
{ 
    e.stopPropagation(); 
    e.preventDefault(); 
    $('body').append(e.target.href); 
}); 

예를
http://jsfiddle.net/Lf3hL/13/

Answer 1

인 stopPropagation 대리인 작동하지 않습니다 - 그들은 문서의 상단에 전파 한 후에는 .live() 메소드가 이벤트를 처리하기 때문에 http://api.jquery.com/event.stopPropagation/

, 그것의 전파를 중지 할 수 없습니다 라이브 이벤트. 비슷하게 .delegate()가 처리하는 이벤트는 위임 된 요소로 전달됩니다. DOM 트리에서 그 아래에있는 모든 요소에 바인딩 된 이벤트 핸들러는 위임 된 이벤트 핸들러가 호출 될 때까지 이미 실행되었을 것입니다. 따라서 이러한 핸들러는 event.stopPropagation()을 호출하거나 false를 반환하여 위임 된 핸들러가 트리거되지 않도록 할 수 있습니다.당신이 대리자를 사용 stopImmediatePropagation를 사용하는 테스트 클릭을 변경하는 경우

지금은

$('#all').delegate('#test', 'click' ,function() { 
    alert('only when i click on the div'); 
});  

$('#all').delegate("a", "click", function(e) 
{ 
    e.stopImmediatePropagation(); 
    e.preventDefault(); 
    $('body').append(e.target.href); 
}); 

http://jsfiddle.net/Lf3hL/14/

Answer 2

때문에 상위 요소 (귀하의 예제에서 #all을)를 처리 한 후, 이벤트 거품을 위로 시켜서 delegate() 작품.

이벤트가 이미 버블 링되었으므로 이벤트가 전파되기 때문에 소스에서 전파되는 것을 막을 수 없습니다. jQuery .delegate() doc에서

Answer 3

: 그들은 문서의 상단에 전파 한 후에는 .live() 메소드가 이벤트를 처리하기 때문에

, 라이브 이벤트의 전파를 중지 할 수 없습니다. 비슷하게 .delegate()가 처리하는 이벤트는 위임 된 요소에 을 전달합니다. 에 바인딩 된 이벤트 핸들러는 위임 된 이벤트 핸들러가 호출 될 때까지 이미 실행 된 것입니다.

하나의 가능한 해결책은 a에서 이벤트 핸들러를 부착하지만, 대신에 #test 및 event.target을 검사하지 않는다.

저는이 방법으로 updated your Fiddle입니다.

$('#test').click(function(e) { 
     if ($(e.target).is('a')) { 
      alert('link was clicked'); 
     } 
     else { 
      alert('only when i click on the div'); 
     } 

     e.preventDefault(); //just to cancel the link's default action 
    }); 

Answer 4

가 왜

.live() 

기능을 사용하지 작동합니까?

$('a').live('click', function() { 
    // Live handler called. 
}); 

본문이 완전히로드 된 후에 추가되는 모든 태그에 클릭 기능이 추가됩니다.

Answer 5

'일반'이벤트와 동일한 방식으로 라이브 및 대리자 기능이 e.stopPropagation(); 호출을 처리 할 수 ​​없습니다. 대리인 docs에서 - 그들이 문서의 상단에 전파 한 후에는 .live() 메소드 이후

이벤트를 처리, 라이브 이벤트의 전파를 중지 할 수 없습니다. 비슷하게 .delegate()가 처리하는 이벤트는 위임 된 요소에 을 전달합니다. 에 바인딩 된 이벤트 핸들러는 위임 된 이벤트 핸들러가 호출 될 때까지 이미 실행 된 것입니다. 따라서 이러한 핸들러 은 delegated 처리기가 event.stopPropagation()을 호출하거나 false를 반환하여 트리거하지 못하게 할 수 있습니다.