e.target.hasClass（）は一致するすべての要素に作用しません

Question

私は、リストを作成しています。動的に生成され、したがって.click（）タスクは次のようになります。

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

（私は最後の/タグがここに表示されない理由はわからないんだけど、それはあります。

私はあなたが完全なタスクをクリックしたときに実行される機能を持っています（ここで簡略化）：

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

ご覧のとおり、ユーザーがいずれかのボタンをクリックした場合は実行しないようにしますが、他のときに実行します。これは "編集"ボタンには効果的ですが、何らかの理由で "削除"ボタンでは機能せず、理由を特定できません。なぜボタンセレクターは両方のために働いていないのですか？必要に応じて余分なドキュメンテーションを提供することを幸せに！

ありがとうございます。

Answer 1

を私はあなたのボタンにし、例えば、e.stopPropagation()を呼び出すために、それらの中にクリックハンドラを取り付けることをお勧め：

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

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

// same for other buttons... 

その後、あなたはイベントがないでしょうバブルアップすることを安心することができますあなたの仕事要素に：

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


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

Answer 2

<button>の中の<i>要素をクリックした可能性があります。この場合、は<i>になります。あなたは試みることができる：

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