Bootstrap 我可以排除TR点击事件中的按钮点击吗？

bkhjykvo 于 2023-06-20 发布在 Bootstrap

关注(0)|答案(3)|浏览(137)

我当前正在突出显示选中的表行，但在其中一个单元格中有一个按钮。当我单击按钮时，我将触发表行单击事件。有可能把两者分开吗？
我的两个电话现在看起来是这样的：

$('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>

有什么办法可以阻止按钮单击事件触发行单击事件吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/13589022/can-i-exclude-a-button-click-inside-a-tr-click-event

3条答案

按热度按时间

8fq7wneg1#

使用stopPropagation：

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

(See（What's the difference between event.stopPropagation and event.preventDefault?）

赞(0）回复(0）举报 2023-06-20

yv5phkfx2#

我相信这是由事件冒泡引起的，请尝试在e.preventDefault();之后使用e.stopPropagation();

赞(0）回复(0）举报 2023-06-20

jyztefdp3#

试试这个：

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

$(".email-user").on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
});

赞(0）回复(0）举报 2023-06-20

我来回答

Bootstrap 我可以排除TR点击事件中的按钮点击吗？

3条答案

相关问题

热门标签

最新问答