停用特定行和特定列中单元格的点击事件

Question

我在每行都有一个单击事件，但我想为行中第七列类名为"doc"的特定单元格禁用它。

我有这个代码。

$('#table').on('click', 'tbody tr', function () {})

我试图通过在选择器中删除单元格来删除它，但它不起作用

$('#table').on('click', 'tbody tr:not(.doc td:eq(6))', function () {})

谢谢

Answer 1

当这个孩子的点击被触发时，你应该尝试停止传播

$('table')
.on('click', 'tbody tr.doc td:nth-child(3)', e => {
console.log('cell clicked')
e.stopPropagation();
})
.on('click', 'tbody tr', e => {
console.log('row clicked', $(e.currentTarget).index())
});

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
table tbody {
border: 1px solid black;
}
table tbody tr {
color: white;
text-align: center;
}
table tbody tr td {
width: 50px;
height: 50px;
background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="doc">
<td>1</td>
<td>2</td>
<td style="background: blue;">3</td>
<td>4</td>
</tr>
<tr class="doc">
<td>1</td>
<td>2</td>
<td style="background: blue;">3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>

Answer 2

将事件附加到td而不是tr上。

$('#table').on('click', 'tbody tr:not(.doc) td:not(:eq(6))', function () {})