ngăn chặn sự kiện bubling không hoạt động trong jquery

Question

Tôi có DOM như thế này

<div class="modal"> 
<li> 

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

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

</div> 

</li> 

Tôi có một sự kiện nhấp chuột kèm theo li và khi tôi nhấp vào nút block2, sự kiện đó xảy ra. Làm thế nào để ngăn chặn điều đó xảy ra?

Tôi đã thử sử dụng on() nhưng nó không hoạt động.

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

Answer 1

Bạn nên sử dụng stopPropagation để ngăn chặn sự kiện bọt:

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

Answer 2

Thêm event.stopPropagation() để xử lý của bạn

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

    alert('test'); 
});