Table Row onClick Overriding Checkbox

Question

I'm having some issues with checkboxes in a table being "overridden" by the onClick attribute of the table row they are placed in.

I have a column with checkboxes as the leftmost column of a table, and I also have an onClick function defined for each table row. As a result, when I click any of the checkboxes, the onClick function of the table row triggers (though the checkbox is still clicked correctly).

Is there any way I can work around this? Having the table row's onClick only register for the other columns, for example? (I have no clue how the implementation of that would work, unfortunately, but that's the first solution I can think of.)

Thanks in advance!

Answer 1

Take a look at event.stopPropagation()

event.stopPropagation

You'll want to call this in your checkbox click handler.

Answer 2

$('.columnClass').click(function(e){
     if(this == e.target){
      //do things
 }

})

This will only execute your click handler when it's actually the column that's being clicked, not the checkbox.