Help with AJAX navigation. How do I disable normal link behavior?

[ttocskcaj]

I'm using jQuery and HTML5 to try and create an AJAX navigation.

I have the navigation in standard <a> tags like so:

<a id="forums" href="{url route="forums"}">Forums</a>

When JS is enabled on the browser, I don't want the browser to follow the link, but rather have AJAX take care of it (The AJAX part works fine).

 

What I'm stuck on, is disabling the default behavior of the link.

I've tried using preventDefault(), but it seems to have no effect??

Here's the code that handles the PushState/AJAX stuff.

$(document).ready(function() {
    $('a#home').click(function(){
        preventDefault()
        history.pushState({state:'new'},'Home','{$baseaddress}');          
        readurlstate();
                    
    });
    $('a#forums').click(function(){
        preventDefault()
        history.pushState({state:'new'},'Forums','{$baseaddress}forums/');
        readurlstate();
    });
    $('a#account').click(function(){
        preventDefault()
        history.pushState({state:'new'},'Account','{$baseaddress}account/');
        readurlstate();
    });
});
function readurlstate() {
    $("#content").html('<p>Loading...</p>');
    $.ajax({
        url: document.location.href
    }).done(function( html ) {
        $("#content").hide().html(html).fadeIn("fast");
    });
};

[gristoi]

you not handling the event correctly. you will need to pass the event into the function:

$('a#home').click(function(e){
        e.preventDefault()

 

[ttocskcaj]

Thanks I also just learnt that returning false in a function will stop its default action?