jQuery: using 2 functions with table

Question

hi all,

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?

thx

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().