e.target.hasClass() tüm eşleşen öğeler üzerinde çalışmayan

Question

Kafam karıştıran bir durumum var - yapılacaklar listesi yapıyorum ve her (dinamik olarak oluşturulmuş, dolayısıyla no .click()) görevi aşağıdaki gibi görünüyor:

<a href="#" class="col-xs-12 list-group-item task"> 
    <div class="col-xs-8 spacer p-l-0"> 
     <div class="col-xs-1 checkbox"> 
      <span class="fa fa-square-o"></span> 
     </div> 
     <div class="col-xs-11 p-x-0"> 
      <span class="task-text">Do that really cool thing</span> 
      <p class="date m-b-0"><small class="text-muted"></small></p> 
     </div> 
    </div> 
    <div class="col-xs-3 text-xs-right tag-container pull-xs-right p-r-0" id="tags1"> 
     <span class="label label-primary tag">cool</span> 
     <span class="label label-primary tag">list</span> 
    </div> 
    <button type="button" class="btn btn-danger btn-sm task-button delete-button pull-xs-right"><i class="fa fa-times"></i></button> 
    <button type="button" class="btn btn-warning btn-sm task-button edit-button pull-xs-right"><i class="fa fa-pencil"></i></button> 

(geçen/bir etiket burada neden gösterilmediğini emin değilim, ama orada.

Ben tam görev tıklayın çalıştırılan bir işlevi var (burada basitleştirilmiştir):

$('#taskList').on("click", ".task", function(e) { 
    if ($(e.target).is('button')) return; 
    alert('clicked task'); 
}); 

Gördüğünüz gibi, kullanıcı düğmelerden birini tıklatırsa çalışmasını istemiyorum, ancak başka bir zamanda çalışmasını istiyorum. Bu "düzenleme" düğmesi için harika çalışıyor, ancak bazı nedenlerden dolayı "sil" düğmesi için çalışmıyor ve nedenini anlayamıyorum. Düğme seçici neden ikisi için çalışmıyor? Gerektiğinde ekstra dokümantasyon sağlamaktan mutluluk duyarız!

Çok teşekkürler.

Answer 1

Ben örneğin e.stopPropagation() çağırmak için düğmelere ve bu içinde tıklama işleyicileri takılarak öneririm:

Sonra

$('#task-list').on('click', '.delete-button', onDeleteClick); 

var onDeleteClick = function(e) { 
    e.stopPropagation(); 
    // perform deletion here... 
}; 

// same for other buttons... 

sen emin olabilirsiniz olayları olmaz kabarcık kadar o Görevlerinize gidin:

$('#taskList').on("click", ".task", onTaskClick); 


var onTaskClick = function(e) { 
    // if button was clicked, this will never fire. 
} 

Answer 2

Büyük olasılıkla öğesinin içinde <i> öğesini tıklatıyorsunuzdur, bu durumda e.target<i> olacaktır. Sen deneyebilirsiniz:

var $target = $(e.target); 
    if ($target.is('button') || $target.parent().is('button')) return;