Question

I have a simple setup, a table whose cells have checkboxes within them. I have two events, one that responds to clicking on the checkboxes and another which responds to clicking on the “tr” elements. When I click on a checkbox I don’t want the table row event to fire. I’ve tried event.stopPropagation() and return false; without any luck. Here’s a snippet:

$("tr").click(function() {
    alert("tr clicked");
});

$("input[type=checkbox]").change(function(event) {
    event.stopPropagation();
    alert("checkbox clicked");
});

With something like:

<tr>
    <td><input type="checkbox" id="something" name="something" /></td>
</tr>

If the change event fires the click event will also fire. Any clues on how to stop the tr click event from firing if the checkbox is changed within the td element of the tr?

Answer 1

I recommend this:

$( '#theTable' ).delegate( 'tr', 'click', function ( e ) {
    if ( $( e.target ).is( 'input:checkbox' ) ) { 
        alert( 'checkbox clicked' );
    } else {
        alert( 'tr clicked' );
    }        
});

So, you have only one click handler for the entire table.

Btw, you don’t have to place all the code inside this one handler. You can have separate functions for each action (checkbox clicked VS row clicked), and then…

$( '#theTable' ).delegate( 'tr', 'click', function ( e ) {
    if ( $( e.target ).is( 'input:checkbox' ) ) { 
        checkboxClicked( e );
    } else {
        rowClicked( e );
    }        
});

function checkboxClicked ( e ) {
    // process event
}

function rowClicked ( e ) {
    // process event
}