I have my website, http://www.yokaproject.com/, i decided to clean it up, im still in the process so if you see that i have mistakes fine, im not done, but i appreciate any comments. The nav at the top displays anchor tags to click and load jquery into the div#container. My problem is that calls are being doubled each time and nesting more and more content, just click art twice in a row. Ive been at this since last Monday so any help is appreciated. Here is my function
$('.header a').on('click', ajaxLoad);
function ajaxLoad(e) {
e.preventDefault();
var url = $(this).attr("href");
var that = $(this);
that.off('click'); // remove handler
$.ajax({
url: url,
dataType: "html",
type: "GET",
cache: false
}).done(function(data){
$("#container").html(data);
});
};
If you want a better look at the html and css you can just visit my site. i plan on putting it up on github in the future once it gets larger but for now its not necessary.
that.on('click', ajaxLoad); // add handler back after ajax
This line of code re-attaches the click handler every time an ajax response comes. And every time you click that you create an ajax request.
Your mistake is: in always function, you are again calling the ajaxLoad function in callback! So it is calling multiple times. Please remove that line from you code.