e.target.hasClass() arbeitet nicht an allen passenden Elementen

Question

Ich habe eine verwirrende Situation - Ich mache eine Aufgabenliste, und jede (dynamisch generierte, daher keine .click()) Aufgabe sieht wie folgt aus:

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

(ich bin mir nicht sicher, warum die letzte/ein Tag nicht hier zeigt sich ist, aber es ist da.

ich habe eine Funktion, die ausgeführt wird, wenn Sie auf die volle Aufgabe klicken (hier vereinfacht):

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

Wie Sie sehen können, möchte ich nicht, dass es ausgeführt wird, wenn der Benutzer auf eine der Schaltflächen klickt, aber ich möchte, dass es zu einem anderen Zeitpunkt ausgeführt wird. Das funktioniert gut für den "Bearbeiten" -Button, aber aus irgendeinem Grund funktioniert nicht für den "Löschen" -Button und ich kann nicht herausfinden, warum. Warum funktioniert der Knopfwähler nicht für beide? Gerne zusätzliche Dokumentation bei Bedarf!

Vielen Dank.

Answer 1

Ich würde vorschlagen Klick-Handler, um Ihre Schaltflächen und innerhalb dieser Befestigung e.stopPropagation() zu nennen, zum Beispiel:

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

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

// same for other buttons... 

Dann können Sie sicher sein, dass die Ereignisse nicht sprudeln in Ihre Aufgabe Element:

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


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

Answer 2

Sie klicken höchstwahrscheinlich auf das <i> Element innerhalb der <button>, in diesem Fall e.target wird die <i> sein. Sie könnten versuchen:

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