CODEWITHSUNDEEP
jquery
Zamboo
Zamboo

Reputation: 539

test checkbox inside a TR table

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 ?

Upvotes: 1

Views: 138

Answers (2)

Thijs Kramer
Thijs Kramer

Reputation: 1117

Try the following: 

$(".tr").click(function(e){
  if(e.target.nodeName == "INPUT") return false;
  // do stuff 1     
});

$(".checkbox").change(function() {
    // do stuff 2    
});

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382274

You can do this :

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

Demonstration

Upvotes: 3

Related Questions