Clickable Row & Checkbox conflict

I made my table row clickable with this function

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

and it works fine, however when I try to click the checkbox self, it doesnt work.
What should I do to make both of them work?

Answer

Using a single event handler:

$("#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/

Attribution
Source : Link , Question Author : wallace740 , Answer Author : karim79

Leave a Comment