1

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 () ...

http://jsfiddle.net/kevmor/7txDz/

kevmor
  • 172
  • 1
  • 11
  • Thanks that works but now I realized I have another problem, I'm using a checkbox per row as a 'select all' checkboxes for the row. If I stop the bubble up is there a way I can still do the select all (checkboxes)? – kevmor May 12 '14 at 21:33
  • The selector `'tr:not(input)'` selects all `` elements which are also not `` 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. – jinglesthula Dec 05 '18 at 18:08

2 Answers2

1

This is called Event Bubbling.

jQuery stopPropagation bubble down

Use:

$('input').on('click', function (e) {
   e.stopPropagation();
})
Community
  • 1
  • 1
Dylan Hayes
  • 2,331
  • 1
  • 23
  • 33
0

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.

Jai
  • 74,255
  • 12
  • 74
  • 103