jQuery : 자식의 바인딩 해제 이벤트?

Question

목록 항목 내에 앵커가 있습니다. 두 요소 모두 이벤트가 있습니다. 내에서 앵커를 클릭하면 목록 항목을 클릭하지 않도록하고 싶습니다.

저는 혼돈을 피하고 싶습니다. 나는이 기능을 찾았지만 내가 원하는대로 내가 그들을 사용 할 수 없습니다 : 여기

// HTML 
<ul> 
    <li id="1">Item #1 <a href="" class="delete">[DEL]</a></li> 
    <li id="2">Item #2 <a href="" class="delete">[DEL]</a></li> 
    <li id="3">Item #3 <a href="" class="delete">[DEL]</a></li> 
    <li id="4">Item #4 <a href="" class="delete">[DEL]</a></li>  
</ul> 

// JS 
$("ul").sortable(); 

$(document).on("click", "li", function() { 
    alert("list-item clicked."); 
}); 

$(document).on("click", "a.delete", function(e) { 
    e.preventDefault(); 
    if (confirm("Del?")) { 
     alert("list-item clicked."); 
    } 
    // do nothing 
}); 

입니다 :

• http://api.jquery.com/off/
• http://api.jquery.com/unbind/

코드가 있다고 바이올린 : http://jsfiddle.net/UtE87/1/

가장 좋은 방법은 무엇입니까? 많은 감사드립니다!

Answer 1

이벤트 전파로 인해 이벤트 전파를 중지해야합니다. 그것은 e.stopPropagation()를 호출하여 수행 할 수 있지만, 당신은 또한 기본 동작을 방지하기 때문에, 당신은 이벤트 핸들러에서 false를 반환 모두에 의해 할 수

$(document).on("click", "a.delete", function(e) { 
    if (confirm("Del?")) { 
     console.log("list-item a clicked."); 
    } 
    // do nothing 

    return false; //prevent default and stop propagation 
}); 

데모 : 당신은 클릭이었다 요소를 확인할 수 있습니다 Fiddle

Answer 2

delete 요소가 클릭되지 않은 경우에만 목록 항목 클릭 기능을 실행하십시오.

데모 : http://jsfiddle.net/k5sdC/1/

jQuery를 :

$(document).on("click", "li", function(e) { 
    if (!$(e.target).is('a.delete')){ 
     alert("list-item clicked."); 
    } 
});