web-dev-qa-db-ja.com

jQueryはテーブルセルイベントをクリックします

私は以下のようなhtmlコードを持っています

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

そして、次のようなjQueryコードがあります。

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

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

tdをクリックすると、function_tdは正常に動作しますが、function_trも機能します。
防止方法function_tr

8
namco

event.stopPropagation() を使用する必要があります

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

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

5
Amjad Masad