Question

I have a table with some rows and I am using jQuery to apply a click event to the TRs

$("tr").click(function(e)
{
    console.log($(this).data("rowid"));
});

That works fine. One of the TDs, I have an actual link and when I click the link, I still get the console.log to print out. Is there a way to exit that click function if I am clicking the link?

Answer 1

Call event.stopPropagation();

$('td a').click(function(event) {
    event.stopPropagation();
});

This will prevent the parent <tr> element’s click event from firing when you click on a link that’s within a <td>.

Here’s a working example: http://jsfiddle.net/ALUZy/