javascript - 单击复选框时会触发两次 jQuery 单击事件

Question

我正在玩弄DataTables，我有一个这样的表:

<table id='dt'>
    <thead><!-- Some Header --></thead>
    <tbody>
        <tr data-lineid=1>
            <td><input type='checkbox' class='checked_entry' id='checked_1'></td>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <!-- Rest of the table -->
    </tbody>
</table>

我想要做的是能够点击行中的任何地方，它会选中这一行的复选框:

$('#dt tbody').on('click', 'tr', function() {
    var id = $(this).data('lineid');
    if ($('#checked_'+id).prop('checked')) {
        $('#checked_'+id).prop('checked', false);
    } else {
        $('#checked_'+id).prop('checked', true);
    }
});

这工作正常，除了现在，当我单击复选框本身时，它似乎触发了复选框单击事件加上 tr 上绑定(bind)的事件>.

我试过类似的东西:

$('#dt tbody').on('click', 'tr :not(input)', function() { ... });

但这似乎行不通。

有人可以给我一些提示吗？

谢谢!

Answer 1

每当用户点击复选框时，尝试退出 tr click 事件，

$('#dt tbody').on('click', 'tr', function(e) {
    if($(e.target).is('input')) { return; }
    var id = $(this).data('lineid');
    if ($('#checked_'+id).prop('checked')) {
        $('#checked_'+id).prop('checked', false);
        // ... and some other stuff
    } else {
        $('#checked_'+id).prop('checked', true);
        // ... and some other stuff
    }
});