Using two functions with table

Question

I made a little listview widget which uses a table and assigned a function to its rows like:

$("tr",myTable).bind("click",function(){
    selectRow($(this));
});

I now would like to apply another function called deleteRow, but only to each row's last cell:

$("td:last-child",myTable).bind("click",function(){
    deleteRow($(this));
});

My question: when clicking the last cell for deleting a row, I don't want the selectRow function to be fired - how can I avoid this?

Answer 1

You can stop the click from bubbling up to the <tr>, like this:

$("td:last-child",myTable).bind("click",function(e){
    deleteRow($(this));
    e.stopPropagation();
});

Since your other click handler is on the <tr>, it won't fire, since you stopped it from bubbling up using event.stopPropagation().