Question

I have a code that is essential to my website and it works in every browser, but seems to fire twice in Chrome. It fires twice when I refresh the page, but not when i use ajax/jquery to load content into the main div on my page. However, it works perfectly in every other browser and does not fire twice. Here is my code:

<script type='text/javascript'>
$("a").live('click', function(){
history.pushState({}, '', this.href);
popstate(this.href);
return false;
});
$(window).load(function(){
window.onpopstate = function(event){
popstate(window.location.href);
event.preventDefault();
}
popstate = function(url){
url = '/ajaxlinks/ajaxlink'+window.location.pathname.substr(1);
if (url == '/ajaxlinks/ajaxlink'){url = '/ajaxlinks/ajaxlinkindex.php'}
if (url.indexOf(".php") == -1){url = '/ajaxlinks/ajaxlinkprofile.php'}
if (url == '/ajaxlinks/ajaxlinkaccountrecovery.php'){window.location =   'http://www.pearlsquirrel.com/accountrecovery.php';}
if (url == '/ajaxlinks/ajaxlinklogin.php'){window.location =   'http://www.pearlsquirrel.com/login.php';}
if (url == '/ajaxlinks/ajaxlinklogout.php'){window.location =    'http://www.pearlsquirrel.com/logout.php';}
$('#ajaxloadcontent').load(url);
$('html, body').animate({scrollTop:0}, 'fast');
}
});
</script>

If anyone knows how to fix this, I would greatly appreciate the help. Thanks!

Answer 1

You should always enclose jQuery code in jQuery’s built-in “ready” block.

$(function(){
    //all code here
});

This handles relevant “ready” events automatically.