e.stopPropagation() не работает должным образом?

Question

I have a simple table:

ВУ имеет <tr onclick='alert("row");'>

И кнопка имеет:

$("body").on('click',".b",function (e){ 
    alert('button'); 
    e.stopPropagation(); 
}); 

Однако - Хотя я писал e.stopPropagation(); все еще предупреждает: "строка, кнопка".

Теперь я знаю, что обработчик события присоединен к body и селектор проверяется против него (начало щелчка на кнопке и перейти к телу, так же, как $.live использование делать, но против document ...).

Но проверка должна быть указана для button и не для TR нажмите.

кажется, что в то время как я щелкая, она распространяется на "body" (потому что я прикрепил обработчик события к нему) и в то время как его путь к телу активизирует нажмите на TR.

Что здесь происходит? Как я могу сохранить свой код (прикрепить к телу) и все еще иметь только предупреждение о «кнопке».

P.s.

Я знаю, что могу просто сделать:

$(".b").on('click',function (e){ 
    alert('button'); 
    e.stopPropagation(); 

}); 

, но я хочу знать, почему мой текущий код не работает (!).

Answer 1

Проблема в том, что вы прикрепляете обработчик событий к body, даже если он делегирует элемент .b. Этот обработчик событий вызывается только после вызова обработчика события tr, поэтому слишком поздно прекращать распространение.

Как я полагаю, вы хотите иметь дело с динамически добавляемых элементов и не может просто связать обработчик события к td, я могу предложить вам следующее:

$('body').on('click',"tr",function (e){ 
    alert('row'); 
}); 
$("body").on('click',".b",function (e){ 
    alert('button'); 
    e.stopPropagation(); 
}); 

Demonstration

Answer 2

... но я хочу знать, почему мой текущий (!) Код не работает.

С JQuery Документов на event.stopPropagation с делегацией событий:

Поскольку метод .live() обрабатывает события, как только они распространяются на верхней части документа, не представляется возможным, чтобы остановить распространение от живых событий. Аналогично, события, обрабатываемые .delegate(), будут распространять на элементы, которым они делегированы; обработчики событий, связанные с любые элементы под ним в дереве DOM уже были выполнены к тому времени, когда вызывается делегированный обработчик событий. Таким образом, эти обработчики могут помешать делегированному обработчику инициировать , вызывая event.stopPropagation() или возвращая false.

live и delegate теперь on так это относится.

Answer 3

Может быть, просто прикрепить событие обработки кнопки, как (даже с inline javascript прилагается к <tr> тегу) -

$("td").on('click',".b",function (e){ 
    alert('button2'); 
    e.stopPropagation(); 
}); 

ИЛИ - Вместо того, чтобы дать inline событие в <tr>, и может give-

$(document).on('click',".b",function (e){ 
    alert('button'); 
    e.stopPropagation(); 
}); 

$(document).on('click',"tr",function (e){ 
    alert('tr'); 
    e.stopPropagation(); 
});