How can I intercept a link with jQuery when using a ajax call?

Question

I might be doing something stupid. But if I have a normal link like:

<div id="changeMe"></div>
<a href="/Not/Intercepted" id="interceptMe">A link</a>

and I attach a jQuery click event to the link like so:

$('#interceptMe').click(function() {
  $('#changeMe').text('Changed');
  return false;
});

Everything works peachy. The page does not get redirected to /Not/Intercepted, which is what I would think would be correct.

Now...

I introduct a ajax call like $.get to my click event and now my page will be incorrectly redirected to the page, which essentially overwrites the ajax call.

$('#interceptMe').click(function() {
  $.get('/Ajax/Call', goesIn, function(comesOut) {
  $('#changeMe').html(comesOut);
    }, "html");
  return false;
});

Is there a way to make jQuery or javascript still intercept the link click so it does not go to the href page? I want to keep the href for those users that aren't enabling javascript. TIA!

Answer 1

instead of return false, use ....

$("#interceptMe").click(function(event){

    event.preventDefault();

    // Ajax here

    return false; //for good measure
});

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

I've had many issues with IE especially not listening to return false. Apparently so have others http://coffeeandpaste.blogspot.com/2009/02/javascript-onclick-return-false-does.html