Question

I have an input check-box inside a table TR TD. I trap the click on the TR to do stuff_1, but if I click on the check-box, I would like to do stuff_2 (and not stuff_1):

HTML:

<table>
<TR class="tr">
<TD><INPUT TYPE="CHECKBOX" class="checkbox"></TD>
<TD> Click me 1 to expand</TD>
</TR>

<TR class="tr">
<TD><INPUT TYPE="CHECKBOX" class="checkbox"></TD>
<TD> Click me 2 to expand</TD>
</TR>
</table>

JQUERY:

$(".tr").click(function(){
  //Here I would like to do STUFF_1

});

$(".checkbox").change(function() {
  //Here I would like to do STUFF_2

});

But every time I click on the check-box it does STUFF_1….
How can I solve this ?

Answer 1

You can do this :

$(".checkbox").click(function(e) {
   e.stopPropagation();
   // do your stuff
});

Demonstration