使用jquery选择表行,但在单击按钮时选择行,如何防止这种情况?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (16)

当您单击表行时,它会添加一个更改其外观的类以反映它的选择。

    $('#my_table tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );

但是,我在列中也有一些按钮,可以让您执行特定于该行的操作:

Item    Amount    Action
--------------------------------
Apple   10        [Buy] [Delete]
Banana  5         [Buy] [Delete]
Orange  14        [Buy] [Delete]

当我单击其中一个单独的按钮时,它还会触发要添加的表行'.selected'类,但我不希望在单击按钮时发生这种情况。

提问于
用户回答回答于

您可以使用Event​.stop​Propagation()按钮点击:

$('#my_table tbody').on( 'click', 'tr', function () {
  $(this).toggleClass('selected');
} );
$('#my_table tbody').on( 'click', 'button', function (e) {
  e.stopPropagation();
});

.selected{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table">
  <thead>
    <th>Item</th>
    <th>Amount</th>
    <th>Action</th>
  </thead>
  <tbody>
  <tr>
    <td>Apple</td>
    <td>10</td>
    <td><button>[Buy]</button><button>[Delete]</button></td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>5</td>
    <td><button>[Buy]</button><button>[Delete]</button></td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>14</td>
    <td><button>[Buy]</button><button>[Delete]</button></td>
  </tr>
  </tbody>
</table>
用户回答回答于

您可以在按钮onclick事件上使用stopPropagation()或preventDefault()。这将防止事件冒泡到按钮的父元素(td,tr,table等)。假设你的按钮类为'row-button',下面是一个示例代码:

$('.row-button').on('click', function(event)){
    event.stopPropagation();
    //Do what are intended upon button click.
}

扫码关注云+社区

领取腾讯云代金券