我有一个 HTML5 应用程序,其中有一个表(ID 是 #myTable
在这个问题的其余部分)。该表由 ajax 请求填充。
在 ajax 响应之后,表格的一行如下所示:
<tr>
<td>ID 001</td>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
<td><a href="/fge?id=001" class="btn-fge">Find group entries</a></td>
</tr>
最后一列中的 anchor 并不存在于每一行中。它仅针对某些行出现。如果 anchor 未出现,则会呈现空行:<td></td>
.
在添加此 anchor 之前,我编写了一个函数来切换每行的展开/折叠。扩展后,会发出额外的 ajax 请求来呈现更多数据。该行为使得用户可以单击行内的任意位置。
$('#myTable tbody').on('click', 'td', function (e) {
var tr = $(this).closest('tr');
// Code to expand/collapse tr
// ...
// Ajax request for additional row data
// ...
}
这一切都没有任何问题。
但是,我想隔离行为,以便在用户单击 anchor 时上面的代码不会触发。相反,如果他们单击行内除 anchor 之外的任何位置,则应该触发。
我已阅读 Check if clicked element doesn't have a specific class并试图瞄准 .btn-fge
使用:not()
条件如下。
$('#myTable tbody').on('click', 'td:not(.btn-fge)', function (e) {
}
这不起作用(尽管我相信这可能是因为 .btn-fge
不是 <td>
上的类,而是其中的 anchor ?)。折叠/展开行行为仍然会触发,然后浏览器重定向到 href
值(value)。在给定的示例中,行为是:
- 点击
.btn-fge
. - 该行已展开(或者如果已展开,则将折叠)。
- 浏览器遵循
href
上.btn-fge
所以在这种情况下重定向到/fge?id=001
.
我希望在单击 .btn-fge
时发生 (1),然后发生 (3),但不希望发生 (2) .
我尝试过记录console.log($(this));
接下来是 e.preventDefault()
。我单击的行内的位置并不重要 - 无论它是否在按钮上 - 它都会提供相同的输出,如下所示。
如何定位此按钮,使按钮行为与单击行内其他位置不同?
我使用的是 jquery 版本 3.2.1,并且更喜欢 jquery 解决方案,但普通的 JavaScript 解决方案也可以接受。
编辑 - 我在这里做了一个 fiddle https://jsfiddle.net/adrq0nhz/如果您单击表格内的任意位置,它将控制台记录“这仍在触发”,这实际上是 anchor 没有单独行为的问题。 注意:.btn-fge
类位于 anchor 上,而不是 <td>
,并且无法更改。
最佳答案
您可以使用事件对象的 target
属性来检查单击了哪个元素。
$('#myTable tbody').on('click', 'td', function(e) {
//used prevent default for demonstration purposes to avoid the href link being opened.
e.preventDefault();
if ($(e.target).is('a.btn-fge')) {
console.log('clicked on anchor with the class btn-fge');
} else {
console.log('clicked outside of anchor with the class btn-fge');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tbody>
<tr>
<td>ID 001</td>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
<td><a href="/fge?id=001" class="btn-fge">Find group entries</a></td>
</tr>
</tbody>
</table>
关于javascript - 无法使用 :not() 将按钮定位为分离行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60279359/