事件不会发生

Question

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

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

我的js代码

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

$("#vehicleTable").on('click','.delete',function(e){
    ...
});

实际上只有删除事件发生...如果点击任何其他地方，其他事件不会发生。

有什么建议吗？

Answer 1

您应该删除选择器中多余的 space，否则您的选择器将在您的 td 中搜索没有指定 class 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>

事件不会发生

Event not happen with a not

javascript

jquery

html

html-table

jquery-click-event