可点击的行和复选框冲突

Question

我用这个函数使我的表行可以点击

    $("#grid tbody tr").click(function () {
    var $checkbox = $(this).find(':checkbox');
    $checkbox.attr('checked', !$checkbox.attr('checked'));
});

并且它工作正常,但是当我尝试单击复选框self时,它不起作用.我该怎么办才能使它们都有效？

Answer 1

使用单个事件处理程序:

$("#grid tbody tr").click(function(e) {
    if (e.target.type == "checkbox") {

        // stop the bubbling to prevent firing the row's click event
        e.stopPropagation();
    } else {
        var $checkbox = $(this).find(':checkbox');
        $checkbox.attr('checked', !$checkbox.attr('checked'));
    }
});

http://jsfiddle.net/karim79/UX2Fv/

Answer 2

$('#grid tbody tr input:checkbox').click(function(e) {
    e.stopPropagation();
});

然后单击该复选框将不会触发tr上的单击事件.