title: jQuery click on table cell event
body: <p>I have a html code like below  </p>
  
  <pre><code>&lt;tbody&gt;
    &lt;tr id="info"&gt;
      &lt;td class="name"&gt;Joe&lt;/td&gt;
      &lt;td class="surname"&gt;White&lt;/td&gt;
      &lt;td class="age"&gt;25&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>and there is a jQuery code like this:</p>
  
  <pre><code>$("tr#info").click(function() {        // function_tr
    $(this).css("background-color","yellow");
  });
  
  $("tr#info td").click(function() {     // function_td
    $(this).css("font-weight","bold");
  });
  </code></pre>
  
  <p>When I click on the <code>td</code>, <code>function_td</code> works fine but <code>function_tr</code> also works.<br>
  How to do prevent <code>function_tr</code>?</p>