Friday, April 20, 2012

Removing jquery click event handler from child elements of a table row

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?





No comments:

Post a Comment