Event not happen with a not

Question

I have a datatable , on each row I have a delete button.

If user click on a row but not delete column, I would like to do delete event... otherwise edit

My js code

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

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

Actually only delete event happen... if it click any other place, the other event not happen.

Any suggestion?

Answer 1

You should remove the extra space in your selector, else your selector will search inside your td for the elements that have not the specified class delete :

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

Must be :

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

Working Sample:

$("#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>