tr 的 jQuery 单击处理程序，td 中的元素除外

Question

我已将点击处理程序附加到表格行元素，我需要一些帮助来从点击处理程序中排除带有类子菜单的元素。

我尝试使用 jQuery :not选择器成功排除整个td元素，但这不是我想要的。

JsFiddle 链接

下面的代码需要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');
  });
});

** - 编辑 - **

更新了 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>