事件未发生与不发生

Question

我有一个数据表，在每一行我都有一个删除按钮。

如果用户单击一行但不删除列，我想做删除事件...否则编辑

我的 js 代码

$("#vehicleTable tbody tr td :not('.delete')").on('click', function () {
...
});
$("#vehicleTable").on('click','.delete',function(e){
...
});

实际上只发生删除事件...如果它单击任何其他位置，则不会发生其他事件。

有什么建议吗？

Answer 1

你应该删除选择器中多余的空间，否则你的选择器将在你的td中搜索没有指定类delete的元素：

$("#vehicleTable tbody tr td :not('.delete')").on('click', function () {
____________________________^

必须是 ：

$("#vehicleTable tbody tr td:not('.delete')").on('click', function () {

工作示例：

$("#vehicleTable tbody tr td:not('.delete')").on('click', function() {
console.log("EDIT");
});
$("#vehicleTable").on('click', '.delete', function(e) {
console.log("DELETE");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="vehicleTable" border=1>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Actions</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td class="delete">DELETE</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td class="delete">DELETE</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
<td class="delete">DELETE</td>
</tr>
</table>