In the following code, how can I make it so clicking the checkbox or input field doesn't toggle the row selection? I tried using the not() selector as in:
$('#example tbody').on('click', 'tr:not(input)', function () ...
2 Answers
This is called Event Bubbling.
jQuery stopPropagation bubble down
Use:
$('input').on('click', function (e) {
e.stopPropagation();
})
Comments
use e.stopPropagation() on inputs:
$('#example tbody').on('click', ':input', function(e){
e.stopPropagation(); // stops the event to bubble up to the dom tree
}).on('click', 'tr', function () ...
Demo
:input in jQuery selects all the form elements including checkboxes, radios, textareas, selects etc.
'tr:not(input)'selects all<tr>elements which are also not<input>elements. Really, the only way to "select a tr excluding specific descendants" is to do the stopPropagation approach @DylanHayes shows below, I believe. I wanted to do exactly what you're describing, and this worked for me.