Jquery stopPropagation не работает, два случая

Question

$(document).on('click', '.outer1', function(){
    alert('outer click event');
})

$(document).on('click', '.inner1', function(e){
    e.stopPropagation();
    alert('inner click event');
})

$('.outer2').on('click', function(){
    alert('outer click event');
})

$(document).on('click', '.inner2', function(e){
    e.stopPropagation();
    alert('inner click event');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer1">
   <div class="inner1"> Case 1 - Click Here</div>
</div>


<div class="outer2">
   <div class="inner2"> Case 2 - Click Here</div>
</div>

Например, модальное окно:

<div class="outer">
   <div class="inner"></div>
</div>

Первый случай:

$(document).on('click', '.outer', function(){
    alert('outer click event');
})

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

Второй случай:

$('.outer').on('click', function(){
    alert('outer click event');
})

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

В чем разница?Почему stopPropagation () работает в первом случае, но не работает во втором случае?

Answer 1

Последнее не работает, потому что событие должно всплывать через DOM от .inner до document, чтобы оно было перехвачено делегированным обработчиком события.

Однако, он перехватывается обработчиком событий на .outer, когда он всплывает, и это до вызова stopPropagation().