wallace740 wallace740 - 2 months ago 26
jQuery Question

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/