Jquery stopPropagation not working, two cases

user_5612076 0
Viewed 52

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

For example, modal window:

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

First case:

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

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

Second case:

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

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

What is the difference? Why stopPropagation() working in first case, but not working in second case?

stoppropagation jquery javascript
1 Answers

The latter doesn't work because the event needs to bubble up through the DOM from .inner to document for it to be caught by the delegated event handler.

However, it's caught by the event handler on .outer as it bubbles up and this is before the stopPropagation() call has been made.

user_5194130
Related