通话中的AJAX嵌套内容

Question

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.

• you can now view complete code on my website

Answer 1

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.