Page being called through AJAX call multiple times, can't find out why

Question

I feel like it is one of those things where I just need someone else to look at it. I am trying to load via the backend my pages but I am having a slight problem. If you can recommend a cleaner way to do it, do so. But right now my problem is that occasionally, especially if I click in quick succession, it will actually fetch the page multiple times. Of course this makes it look incredibly buggy and ruins the entire point of doing what I am doing.

You can see the site at http://new.potentstudios.com

Click the pages enough and you'll see what I am talking about.

I'm not so sure what kind of more information is needed. I am just totally stumped. I've spent hours on it just today and it has that problem. I suspect it has to do with the hash change detection, but I haven't been able to confirm that.

Whoever can help me at least find the answer will be my best friend forever.

EDIT: Here is the Javascript source file in question. It is too long to post in the code tags IMO.

http://new.potentstudios.com/wp-content/themes/Potent/scripts/main.js

EDIT2: I can now confirm that it has to do with the hashchange, however I don't know why it is doing it twice. Can anybody see where I am changing the hash twice?

Answer 1

I don't know if I understand correctly your problem, but looks like that you are sending an ajax request before another one is complete. If this is the case, try to abort the previous one using something like:

jsXHR=null;
$('#myLink').click(function(){
     if(jsXHR)
         jsXHR.abort();
     jsXHR=$.get('my.url',function(data){
           jsXHR=null;
           $('#myTarget').html(data);
           //(...)
     });
});

Answer 2

two things to suggest without even looking into your code.

1. return false from Ajax function
2. inside your $(".class").click(function(){ add $(this).unbind('click');