jQuery обработчик click для tr, за исключением элемента в td

Question

Я привязал обработчик клика к элементу строки таблицы и мне нужна помощь в исключении элемента с подменю из обработчика кликов.

Я попытался JQuery : Не селектор, чтобы исключить весь тд элемент успешно, но это не то, что я хочу.

JsFiddle link

Ниже кода Требуется jQuery, Bootstrap и FontAwesome работать. См. Ссылку JsFiddle выше.

HTML

<table class="table"> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Details</th> 
     <th>Status</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>123</td> 
     <td>Name 1 
      <div class="pull-right sub-menu"> 
       <div class="btn-group"> 
        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-chevron-down"></i> 

        </button> 
        <ul class="dropdown-menu pull-right" role="menu"> 
         <li><a href="#">Edit</a></li> 
         <li><a href="#">Delete</a></li> 
         <li><a href="#">Block</a></li> 
        </ul> 
       </div> 
      </div> 
     </td> 
     <td>New User</td> 
     <td>Pending</td> 
    </tr> 
    </tbody> 
</table> 

Javascript

$(function() { 
    $('table tr').on('click', function() { 
    alert('Clicked'); 
    }); 
}); 

** - Edit - **

Обновлено JsFiddle. Я добавил комментарий ниже, включив ответ.

// The below "if" condition is the ANSWER. 

Answer 1

Одним из решений является ли нажатая цель внутри элемента с классом sub-menu

$(function() { 
 
    $('table tr').on('click', function(e) { 
 
    if (!$(e.target).closest('.sub-menu').length) { 
 
     //do your stuff 
 
     alert('Clicked'); 
 
    } 
 
    }); 
 
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" /> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 
<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>ID</th> 
 
     <th>Name</th> 
 
     <th>Details</th> 
 
     <th>Status</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>123</td> 
 
     <td>Name 1 
 
     <div class="pull-right sub-menu"> 
 
      <div class="btn-group"> 
 
      <button type="button" class="btn btn-default btn-xs dropdown-toggle edit-asset" data-toggle="dropdown" style="border: none;"> 
 
       <i class="fa fa-chevron-down"></i> 
 

 
      </button> 
 
      <ul class="dropdown-menu pull-right" role="menu"> 
 
       <li><a href="#">Edit</a></li> 
 
       <li><a href="#">Delete</a></li> 
 
       <li><a href="#">Block</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </td> 
 
     <td>New User</td> 
 
     <td>Pending</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

Вы можете использовать stopPropagation, чтобы остановить щелчок от распространяющейся к Tr:

$('.sub-menu').on('click', function(e){ 
    e.stopPropagation(); 
});