jQuery如何在点击事件中排除特定的TD？

Question

如何在下面我创建的jQuery中排除特定的TD（比如第一个）不参与行事件？

```javascript $('tr').on('click', function(){ $(this).addClass('selected'); }); ```

jQuery("#list tbody tr").click(function(){
alert('click this');
//some code here
});

jQuery("#list tbody tr td.exclude").click(function(){
alert('click not that');
//some code here
});

td { border: 1px solid black; padding: 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="list">
    <tr>
        <td class="exclude">first</td>
        <td>second</td>
        <td>third</td>
    </tr>
    <tr>
        <td class="exclude">first</td>
        <td>second</td>
        <td>third</td>
    </tr>
</table>

我需要为我的row设置一个事件，但要排除所有类名为exclude的TD元素，这可行吗？

- Simon Orro

---

你可以为所有需要点击的 TD 添加一个类，例如 class="wantClick"，然后只需更新 jQuery("td.wantClick")。 - Leszek P

Answer 1

您可以使用“not”方法来排除元素：

$('#list tr td').not('.exclude').on('click', function(e) {
    console.warn('click!');
});

- Roberto Conte Rosito

---

事件应该被添加到trafais上。 - user3154108

Answer 2

尝试在选择器中使用:not()。

jQuery("#list tbody tr td:not(.exclude)").click(function(){
alert('click this');
//some code here
});

td { border: 1px solid black; padding: 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="list">
    <tr>
        <td class="exclude">first</td>
        <td>second</td>
        <td>third</td>
    </tr>
    <tr>
        <td class="exclude">first</td>
        <td>second</td>
        <td>third</td>
    </tr>
</table>

- prasanth

Answer 3

你可以在事件对象上使用target属性，并检查它是否具有exclude类。

$('tr').click(function(e) {
  if (!$(e.target)
    .parents()
    .andSelf()
    .hasClass('exclude')) {
    alert('Click')
  }
})

td {
  border: 1px solid black;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="list">
  <tr>
    <td class="exclude"><div><span>first</span></div></td>
    <td>second</td>
    <td>third</td>
  </tr>
  <tr>
    <td class="exclude">first</td>
    <td>second</td>
    <td>third</td>
  </tr>
</table>

- Nenad Vracar

---

谢谢，这对我来说是完美的解决方案！ - Simon Orro

不客气，注意它将从具有exclude类的任何元素中删除点击事件，而不仅仅是td，因此如果您只想从具有exclude类的td中删除它，则可以添加此选项。https://jsfiddle.net/Lg0wyt9u/2517/ - Nenad Vracar

Answer 4

你可以在jQuery中使用:not选择器，代码如下：

jQuery("#list tbody tr td:not(.exclude)").click(function(){
  alert('click this');
  //some code here
});

- Mircea Andrei

Answer 5

尝试一下，你会实现自己的目标...

$(document).ready(function(e) {
$('#list tr').click(function(e) {
  if (!$(e.target).hasClass('exclude')) {
    alert('Click')
  }
})

});

- Sarim

Answer 6

您可以像在一个调用中那样使用:not CSS选择器：

jQuery("#list tbody tr td:not(.exclude)");

- dferenc