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上绑定的事件

我尝试过类似的事情：

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

但这似乎不起作用。

有人可以给我一个小费吗？

谢谢！

Answer 1

每当用户点击复选框

时，尝试退出tr点击事件

$('#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
    }
});

Answer 2

这是因为复选框本身的click事件会传播。作为一种解决方案，您可以检查实际的点击目标是否是复选框，在这种情况下，不会在点击处理程序中执行任何操作。

$('#dt tbody').on('click', 'tr', function (e) {
    if (!$(e.target).is('input:checkbox')) {
        $(this).find('input:checkbox').prop('checked', function (i, checked) {
            return !checked;
        })
    }
});

演示：Fiddle

Answer 3

首先，删除不需要它的迭代标识符;至少不仅仅是为了识别包含复选框的行。

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

然后在jQuery中，您可以使用遍历将事件附加到tr以查找相关的复选框，并在单击复选框时使用stopPropagation()来停止事件被捕获两次。

$('#dt tbody').on('click', 'tr', function() {
    var $checkbox = $(this).find(':checkbox');
    $checkbox.prop('checked', !$checkbox.prop('checked'));
});
$('#dt input:checkbox').click(function(e) {
    e.stopPropagation();
});

Example fiddle

Answer 4

当您点击以下复选框时，您可以确保点击事件不会传播到行元素：

$('#dt tbody input').on('click', function(e) { e.stopPropagation(); });

Answer 5

你可以试试这个。

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

Answer 6

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

Answer 7

因为你已经有表格行点击事件。当你点击复选框时你也会被触发，这里你改变你点击事件中的复选框状态。所以最好阻止复选框的默认（）事件。更好的解决方案会是：

$('#dt tbody').on('click', 'tr', function(e) {
e.preventDefault();
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
}
});

点击Checkbox时，jQuery点击事件被触发两次

7 个答案: