Question

HTML

<table>
    <tr>
        <td>test1</td>
        <td>test2</td>
        <td><a href="#">test3</a></td>
        <td>test4</td>
        <td>test5</td>
        <td class="no-alert">test6</td>
    </tr>
</table>

CSS

table {
    border: 1px solid #000;
}

table td {
    border: 1px solid #000;
    padding: 10px;
}

JS

$(document).on('click', 'table td:not(.no-alert, a)', function()
{
    alert(1);
});

我想让我的代码在每次点击任何表格TD项目时都执行警告窗口，除了那些具有特定类别或具有锚标记的项目。

这怎么可能？

Answer 1

<td>不能是<a>，但可以使用<a>后代:has()。

$(document).on('click', 'table td:not(.no-alert, :has(a))', function()...

编辑：更新允许点击<td>与<a>但不是<a>为目标时

$(document).on('click', 'table td:not(.no-alert)', function(event){
    if(!$(event.target).closest('a').length ){
       // is not click on <a>` tag
    }    
});

使用closest()检查目标，以防<a>有<i>或<img>这样的孩子可能成为实际目标

的 DEMO

如何不用jQuery只选择表中的特定元素？

1 个答案: