jQuery: неотъемлемое событие ребенка?

Question

У меня есть привязка в элементе списка. Оба элемента имеют событие. Я бы не хотел, чтобы щелкнуть элемент списка, щелкнув якорь внутри.

Хотелось бы избежать хаоса. Я нашел эти функции, но я не был в состоянии использовать их, как я хотел:

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

Это код:

// 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://jsfiddle.net/UtE87/1/

Каков наилучший способ? Заранее большое спасибо!

Answer 1

Именно из-за распространения события вам необходимо остановить распространение события. Это может быть сделано путем вызова e.stopPropagation(), но так как вы предотвращения действия по умолчанию, кроме того, вы можете сделать так, возвращая ложное из обработчика события

$(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

Вы можете проверить, какой элемент был нажать на и только запустите функцию щелчка элемента списка, если элемент удаления не был нажат.

Демо: http://jsfiddle.net/k5sdC/1/

JQuery:

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