javascript - Jquery单击事件不会在最后一个孩子中触发？

Question

这是我的 html 代码

<table id='code'>
    <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td class='action'>data4</td>
    </tr>
    <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td class='action'>data4</td>
    </tr>
    <tr>
        <td>data1</td>
        <td>data2</td>
        <td>data3</td>
        <td class='action'>data4</td>
    </tr>

jquery代码是。

$('#code tr td').on('click',function(){
alert($(this).html());
});

这是我的 jquery 代码，它正在工作。所有 td 标签上的此触发点击事件。

但我希望单击事件仅触发前三个td而不是td.action最后一个td。

Answer 1

您可以使用:not()或.not()忽略与选择器匹配的一组元素

$('#code tr td:not(.action)').on('click',function(){
    alert($(this).html());
});

演示：小提琴

或者

$('#code tr td').not('.action').on('click',function(){
    alert($(this).html());
});

演示：小提琴

Answer 2

$('#code tr').on("click","td:not('.action')",function(){
alert($(this).html());
});