Clickable Row & Checkbox конфликт

Question

Я сделал строку таблицы активируемой с помощью этой функции

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

, и она работает нормально, однако, когда я пытаюсь установить флажок самостоятельно, она не работает.Что я должен сделать, чтобы они оба работали?

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 не будет активировано.

Answer 3

лучше, вы можете сделать это с простым HTML, напишите атрибут for в label

<input type="checkbox" id="myCheck"><label for="myCheck">CheckThis</label>
                              ^                   ^

Примечание : id из <input type="checkbox" будет значением for атрибут в <label>

DEMO

Answer 4

Попробуйте это

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

Answer 5

Все эти ответы работают нормально, но я долго застрял, пытаясь понять, почему я не мог заставить их работать.Я генерировал свои строки таблицы динамически, и они еще не существовали в DOM.Поэтому ни одно из решений не сработало.

Для меня это решило использование метода on () .

$('body').on('click', '#grid tbody  tr', function (e) {