Handle multiple events on a HTML table row

Question

I have an HTML table which has an onClick property on the row which navigates me to another page. On this table I want to add a button, or an anchor tag which should do something else; e.g delete the row of that table.

By default, on clicking the button, it executes that JS function and then the Row JS function. How can I set it so that it does not execute the Row event?

I am using JQuery to bind the table row

$('#table-control-data >tr', jqueryContext).live('click', HandleAction);

Answer 1

use

return false; 

at the end of the function that is being invoked by the button.

Use event.stopPropagation() inside the button click.