jQuery load loads previous page if a is clicked

Question

I have this issue with jQuery .load() :

I have a test page called a.php and in there is:

sleep(5); 

So that sleeps for 5 seconds. In my jQuery if that page has started to load and you click another link, it loads that page and then shortly after it loads the previous page.

Is there anyway to stop this?

Code is below:

jQuery(document).ready(function(){

$("#load").hide(); //Hife the loading bar


$("a").click(function(){ //On click
    if(!$(this).hasClass('ignoreJS'))
    {
        $("#load").show();

        $("#mainContent").hide();

        addActive( this );

        var FullAttribute = $(this).attr('href');
        var FinalAttribute = FullAttribute.slice(1);

        $('#mainContent').load( FinalAttribute + '.php', function(response, status, xhr)
        {
            if(status)
            {
                if(status == 'error' && xhr.status != 0)
                {
                    $('#mainContent').html('<h2 class="errorText">Error ' + xhr.status + ' </h2>');
                }
                waitingToLoad = false;

            }
            $("#mainContent").show();
            $("#load").hide();
        });
    }
});   

Answer 1

Try this :

$("a").click(function(){ //On click

  // <your original code>

  // add this at the end of your function
  return false;

});

The return false statement will prevent the browser to follow the href address of your a tag.