prevenire bubling evento non funziona in jQuery

Question

ho il DOM come questo

<div class="modal"> 
<li> 

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

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

</div> 

</li> 

Ho un evento click attaccato alla Li e quando clicco il tasto di blocco2, si è verificato l'evento. Come impedire che ciò accada?

Ho provato a usare on() ma non funziona.

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

Answer 1

Si dovrebbe usare stopPropagation per impedire spumeggiante evento:

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

Answer 2

Aggiungi event.stopPropagation() al gestore

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

    alert('test'); 
});