13

現在、選択時に表の行を強調表示していますが、セルの 1 つにボタンがあります。ボタンをクリックすると、テーブル行のクリック イベントがトリガーされます。2つを分離することは可能ですか？

私の2つの呼び出しは現在次のようになっています：

$('table.table-striped tbody tr').on('click', function () {
   $(this).find('td').toggleClass('row_highlight_css');
}); 


$(".email-user").click(function(e) {
    e.preventDefault();
    alert("Button Clicked");
});

私のHTMLは次のようになります。

<table class="table table-bordered table-condensed table-striped">
  <thead>
    <tr>
      <th>col-1</th>
      <th>col-2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Some Data</td>
      <td><button class="btn btn-mini btn-success email-user" id="email_123" type="button">Email User</button></td>
    </tr>
  </tbody>
</table>

ボタンクリックイベントが行クリックイベントをトリガーしないようにする方法はありますか?

4

3 に答える 3

18

あなたは使用する必要がありますstopPropagation：

$(".email-user").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    alert("Button Clicked");
});

（参照：event.stopPropagationとevent.preventDefaultの違いは何ですか？）

于 2012-11-27T16:52:27.833 に答える
0

これはイベントのバブリングが原因だと思います。e.stopPropagation();直後に使用してみてくださいe.preventDefault();

于 2012-11-27T16:52:20.307 に答える
0

これを試して：

$('.table-striped').find('tr').on('click', function() {
    $(this).find('td').toggleClass('row_highlight_css');
});

$(".email-user").on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
});​
于 2012-11-27T17:58:48.343 に答える