jquery - クリック可能な行とチェックボックスの競合

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でクリックイベントはトリガーされません。

Answer 3

より良いuは単純なHTMLでこれを行うことができ、 for属性を書き込みますlabel

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

注：idofはの属性<input type="checkbox"の値になりますfor<label>

デモ

Answer 4

これらの答えはすべてうまくいきますが、なぜそれらを機能させることができなかったのかを理解しようとして、私は長い間立ち往生していました。テーブルの行を動的に生成していましたが、それらはまだDOMに存在していませんでした。このため、どのソリューションも機能しませんでした。

私にとってこれを解決したのは、on（）メソッドを使用することでした。

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

Answer 5

これを試して

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