Question

I have a table with a checkbox on the first column. When I click anywhere on the row, a class ‘row_selected’ is set on the table row and the checkbox is checked. The code is as follows:

$('#my_table > tbody > tr > td').live('click', function() {
    if ($(this).parent().hasClass('row_selected')) {
        $(this).parent().removeClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", false)
    } else {
        $(this).parent().addClass('row_selected')
        $('td.checkbox input', this.parentNode).prop("checked", true)
    }
})

The problem is some of the table cells have buttons which if clicked, I do not want the row to become selected. i.e.

<tr>
    <td class="checkbox">
        <input type="checkbox" checked="false"/>
    </td>
    <td>blah<td>
    <td>
        <a class="myButton">do stuff</a>
    </td>
    <td>blah<td>
</tr>

I want the jquery click event to work except when I click on myButton.

Anybody got any ideas?

Answer 1

Couldn’t you just stop propagation on the myButton class elements?

$('a.myButton').click(function(e) {
    e.stopPropagation();
});​

Here’s a simplified jsFiddle example using your code that shows how the td click triggers work except when clicking the link.