How can I avoid running this jQuery code when clicking on a hyperlink inside an html table?

Question

I have an html table and when users click on a row, I want to popup a jQuery ui dialog. This works fine by having this code: NOTE: Each row tr has a class of "projectRow"

$(".projectRow").live("click", function (e) {
    var rowId = $(this).attr("id");
    loadPopupDialog(rowId);
});

the problem is that sometimes the content in a cell in the table contains an HTML hyperlink. If you click on a link I want to "respect" the link and NOT popup the dialog. Right now if I have a link inside a cell that opens up a URL in another tab like this:

     <a href="http://www.microsoft.com" target="_blank" class="myLink"><img 
        src="/Content/Images/myIcon.png" class="iconSpace">Project</a>

the new tab opens correctly but when I go back to the first tab, the jQuery ui dialog has been popped up.

How can I prevent the loadPopupDialog() code running when I am clicking inside the row but on a direct html link?

Answer 1

You can prevent the bubbling of the click event with

$(".projectRow a").click(function(e) {
   e.stopPropagation();
})

This will allow the A tag to click, but not the underlying parent. However, if someone clicks on the div and not the way, the dialog will still pop up.

Here's a JSFiddle I created (http://jsfiddle.net/twXU7/) using .click() instead of .live() but still works.