[SOLVED] Event not happen with a not

Event not happen with a not

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?

Solution

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>