prevent event bubling doesn't work in jquery

Question

I have the DOM like this

<div class="modal">
<li>

<div id="block1"></div>
<div id="block2">

<div class="btn-wrap">
<button>cancel</button>
<button>save</button>
</div>

</div>

</li>

I have a click event attached to li and when I click button of block2, that event occurred. How to prevent that to happened?

I tried using on() but it doesn't work.

$('.btn-wrap').on('click','button:first-child',function(e){
            e.preventDefault();
            alert('test');
        });

Answer 1

You should use stopPropagation to prevent event bubbling:

$('.btn-wrap').on('click','button:first-child',function(e){
   e.stopPropagation();
   alert('test');
});