使用jquery选择表行，但在单击按钮时也选择行，如何防止这种情况？
使用jquery选择表行，但在单击按钮时也选择行，如何防止这种情况？
提问于 2019-06-01 12:20:54
当您单击一个表行时，它会添加一个类来更改它的外观，以反映它被选中的情况。
$('#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‘类，但我不希望在单击按钮时发生这种情况。
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-06-01 12:31:11
您可以在单击按钮时使用Event.stopPropagation()：
$('#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>
Stack Overflow用户
发布于 2019-06-01 12:25:35
您可以确保所单击的td不在包含按钮的列中。使用:not，可以确保匹配的元素不匹配特定的选择器；使用:nth-child，可以将容器中的第三个td指定为要排除的那个：
$('#my_table tbody').on('click', 'tr td:not(:nth-child(3))', function() {
console.log('click registered');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table">
<tr>
<td>td 1</td>
<td>td 2</td>
<td><button>button</button></td>
</tr>
</table>
Stack Overflow用户
发布于 2019-06-01 12:33:49
可以对按钮onclick事件使用stopPropagation()或preventDefault()。这将防止对按钮的父元素(td、tr、table等)的事件bubling。假设您的按钮类为'row-button‘，下面是一个示例代码：
$('.row-button').on('click', function(event)){
event.stopPropagation();
//Do what are intended upon button click.
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56403820
复制相关文章
相似问题