Follow link inside JQuery click event

Question

I have links inside <td>s, but I also have a click event on all <td>s. The code looks like this:

$( document ).ready( function() {
    $( 'td.event' ).click( function() {
        var eventName = prompt( 'Enter event:' );
        if ( eventName != null && eventName.length > 0 ) {
            window.location = '?event=' + eventName;
        }
    } );
} );

I want to simply follow the link without showing the popup if the user clicks the link, but to show the popup if the user clicks anywhere else in the <td>. Is this possible in JQuery?

Answer 1

Add this to the end of your document.ready handler:

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

Answer 2

function yourFunction()
{
   var eventName = prompt( 'Enter event:' );

   if(eventName != null && eventName.length > 0) {
      window.location = '?event='+eventName;
   }
}

$('td').click(function() {
   yourFunction();
});

$('td a').click(function() {
   window.location = $(this).attr('href');
});

should do the trick.