jQuery.on() не работает с stopPropagation

Question

Я хочу остановить func() от выполнения, когда я нажимаю на внутренний div.

это HTML:

<div onclick="func()"> 
     <div id="inner-div"> 
      I'm an inner div 
     </div> 
    </div> 

Этот код будет остановить распространение:

$('#inner-div').bind("click", function(e){ 
    e.stopPropagation(); 
}) 

Этот код не удается остановить распространение:

$(document).on("click", '#inner-div' , function(e){ 
    e.stopPropagation(); 
}) 

Как это сделать ?

Answer 1

И решить это можно сделать:

<div onclick="func(event, this)"> 
    <div id="inner-div"> 
     I'm an inner div 
    </div> 
</div> 

JS

function func(e, that) { 
    if (e.target === that) { 
     // do stuff 
    } 
} 

FIDDLE

или использовать JQuery и удалить обработчик инлайн (как вопрос помечена JQuery)

<div id="parent"> 
    <div id="inner-div"> 
     I'm an inner div 
    </div> 
</div> 

JS

$(document).on('click', '#parent', function(e) { 
    if (e.target === this) { 
     // do stuff 
    } 
}); 

FIDDLE

Answer 2

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

Об этом говорится в documentation:

Поскольку метод .live() обрабатывает события, как только они распространяются на в верхней части документа, не представляется возможным, чтобы остановить распространение живых событий.

on() и delegate() ведут себя так же, как live() в этом контексте, только с предком элементом вместо самого документа. Во всех случаях слишком поздно останавливать событие от распространения от целевого элемента.