javascript - jQuery click event triggered twice when clicking on Checkbox -

javascript - jQuery click event triggered twice when clicking on Checkbox -

i'm playing around datatables , have table :

<table id='dt'> <thead><!-- header --></thead> <tbody> <tr data-lineid=1> <td><input type='checkbox' class='checked_entry' id='checked_1'></td> <td>column 1</td> <td>column 2</td> </tr> <!-- rest of table --> </tbody> </table>

what trying able click everywhere in row, , select checkbox of row :

$('#dt tbody').on('click', 'tr', function() { var id = $(this).data('lineid'); if ($('#checked_'+id).prop('checked')) { $('#checked_'+id).prop('checked', false); } else { $('#checked_'+id).prop('checked', true); } });

this working fine, except now, when i'm clicking on checkbox itself, seems triggers checkbox click event plus event bound on tr.

i've tried :

$('#dt tbody').on('click', 'tr :not(input)', function() { ... });

but seems not work.

could give me tip on please ?

thanks !

try exit tr click event whenever user making click on checkbox,

$('#dt tbody').on('click', 'tr', function(e) { if($(e.target).is('input')) { return; } var id = $(this).data('lineid'); if ($('#checked_'+id).prop('checked')) { $('#checked_'+id).prop('checked', false); // ... , other stuff } else { $('#checked_'+id).prop('checked', true); // ... , other stuff } });

javascript jquery events click