Run function then follow link

Question

I can't seem to find an example of what I'm trying to do here but I'm sure it's possible.

Consider the following:

<div id="main_nav">
    <a href="/url/">LINK</a>
    <a href="/url/">LINK</a>
    <a href="/url/">LINK</a>
    <a href="/url/">LINK</a>
</div>

How can I run a function when a link within #main_nav is clicked before then following the link?

The below doesn't work as the link is followed before the function is run.

$('#main_nav a').click(function() {
    // Some Function
});

EDIT

I'm actually trying to clear a cookie with the JQuery cookie plugin when the links are clicked. I'm not sure if this is relevant or not.

The Clear cookie code is:

$.cookie('TMMenu', null);

TMMenu is the correct name and the plugin is loaded.

EDIT

Sorry everyone. The problem was actually with the JQuery Cookie plugin documentation.

$.cookie('TMMenu', null); 

as described in the readme doesn't seem to work. This does:

$.cookie('TMMenu', null, { path: '/', expires: -5 });

Answer 1

Update: Re your edit: I can't see any reason that wouldn't work other than #1 below.

I can think of two answers to this question:

1. You're running your jQuery code before the #main_nav a element exists, and no event handler is hooked up. Put your script at the bottom of the HTML file, just before the closing </body> tag, or use the ready callback.

2. You're doing something asynchronous in your handler, and not seeing it happen. That's because as soon as the event handler returns, the link gets followed — even if your handler initiates some asynchronous action.

Here's how to fix the second one (both, if you put this at the end or inside a ready handler):

$('#main_nav a').click(function(event) {
    // Remember the link href
    var href = this.href;

    // Don't follow the link
    event.preventDefault();

    // Do the async thing
    startSomeAsyncThing(function() {
        // This is the completion callback for the asynchronous thing;
        // go to the link
        window.location = href;
    });
});

(Live copy | source)

Answer 2

Here is how you do it. If you call event.preventDefault in your click handler callback it will prevent the default action. Then to follow the link via Javascript just use window.open(url) or window.location = url.

Plain Javascript example

document.querySelector('#main_nav a').addEventListener('click', function (event) {
  // Do something before following the link 

  // Get url from the target element (<a>) href attribute
  var url = event.target.href;

  // Open the url in the current window. Set to "_blank" instead of "_self" to open in a new window.
  window.open(url, '_self');

  // Prevent default action (e.g. following the link)
  event.preventDefault();
});

jQuery Example

$('#main_nav a').click(function (event) {
  // Do something before following the link 

  // Get url from the <a> href attribute
  var url = $(this).attr('href');

  // Open the url in the current window. Set to "_blank" instead of "_self" to open in a new window.
  window.open(url, "_self");

  // Prevent default action (e.g. following the link)
  event.preventDefault();
});

See MDN for more information on the differences between window.open and window.location.

• https://developer.mozilla.org/en-US/docs/Web/API/Window/open
• https://developer.mozilla.org/en-US/docs/Web/API/Window/location