JQuery click on table cell event

Question

I have html code as below

<tbody> <tr id="info"> <td class="name">Joe</td> <td class="surname">White</td> <td class="age">25</td> </tr> </tbody> 

and here is jQuery code:

 $("tr#info").click(function() { // function_tr $(this).css("background-color","yellow"); }); $("tr#info td").click(function() { // function_td $(this).css("font-weight","bold"); }); 

When I click on td , function_td works fine, but function_tr also works.
How to prevent function_tr ?

Answer 1

You need to use event.stopPropagation ()

 $("tr#info td").click(function(e){ //function_td $(this).css("font-weight","bold"); e.stopPropagation(); }); 

Answer 2

 $("tr#info td").click(function(e){ //function_td $(this).css("font-weight","bold"); e.stopPropagation(); }); 

http://api.jquery.com/event.stopPropagation/