Is my jQuery load request being called twice?

Question

I have this website: http://wearewebstars.dk/poc/index.html If you click the top menu, then it makes an Ajax request to another page. And if you click again, a new request to another page and so on...

However, it seems, that If I click the top navigation once, then it loads the new page, and then if I click on another link in the top navigation, then it seems that it loads the page twice or something? I cant quite figure out why it does this?

If you start by clicking "Omgivelserne", and after that click "Skriv dig op", then the page "Skriv dig op", seems to be loading twice, judging from the fade transitions?

My JS for the Ajax and Transitions (Edited to only show relevant code):

var DIS = DIS || {};
// create a timeline
var tl = new TimelineMax();

(function($, DIS, window) {
    var graphic = $("div.page-transition");
    DIS.PageTransitionStart = {
        start: function(url) {
            $this = $(this);
            var pageTransitionStart = new TimelineMax({
                onComplete: DIS.loadPage,
                onCompleteParams: [url, $this]
            });
            pageTransitionStart.add(TweenMax.set($("body"), {
                className: "animating"
            }));
            pageTransitionStart.to(graphic, 0.3, {
                css: {
                    scale: 50,
                    opacity: 0.5,
                    force3D: true
                },
                ease: Power1.easeOut
            });
            pageTransitionStart.to(graphic, 0.5, {
                css: {
                    scale: 130,
                    opacity: 1,
                    force3D: true
                },
                ease: Power1.easeOut
            });
            //tl.add(pageTransitionStart);
        },
        toggleSelectedClass: function(el) {
            $("#mainmenu").find("a").removeClass("selected");
            el.addClass("selected");
        }
    };
    DIS.PageTransitionEnd = {
        end: function(el, url) {
            var pageTransitionEnd = new TimelineMax();
            pageTransitionEnd.add(TweenMax.to(el, 0.3, {
                css: {
                    scale: 1,
                    opacity: 1
                },
                ease: Power4.easeOut
            }));
            pageTransitionEnd.add(TweenMax.to(el, 0.1, {
                onComplete: function() {
                    TweenMax.set($("body"), {
                        className: ""
                    }); // then only replace with blue div with new height and width
                }
            }));
            //tl.add(pageTransitionEnd);
        }
    };

    DIS.TopNavigation = function() {
        $(".nav a").click(function(event) {
            event.preventDefault();
            $url = $(this).attr("href");
            DIS.PageTransitionStart.start($url);
        });
    };

    DIS.loadPage = function(url, el) {
        var div = url + "#pages-container .content";
        //var title = el.attr("title").replace(/\s/g, ''); //Remove spaces from Title

        $(".content").load(div, function(response, status, xhr) {
            if (status == "success") {
                //alert("test");
                //window.location.hash = title; // Adds a hash to the URL
                console.log(xhr.status);
                DIS.PageTransitionEnd.end(graphic, $url);
                DIS.PageTransitionStart.toggleSelectedClass(el);
                DIS.init();

            } else if (status == "error") {
                alert("Vi kunne desværre ikke hente siden - Kontakt venligst Living Homes");
                console.log(xhr.status);
                console.log(xhr.responseText);
                console.log(response);
                return;
            }
        });
    };

    DIS.init = function() {
        DIS.TopNavigation();

        if ($(window).width() > 768) {
            DIS.pageNavigation();
        }

        DIS.TextEffects();
        DIS.slider();

    };

}(jQuery, DIS, window));


$(function() {
    DIS.init();
});

Answer 1

If you change the following, I assume there would be no more "double clicks". This will make sure that TopNavigation() is only fired once, and not binding two click-events to the menu links.

DIS.init = function() {
    //DIS.TopNavigation();

    if ($(window).width() > 768) {
        DIS.pageNavigation();
    }

    DIS.TextEffects();
    DIS.slider();
};

and

$(function() {
    DIS.TopNavigation();
    DIS.init();
});

Not the best thought out solution, but it's a way to confirm where the problem lies.

Edit: Once confirmed that this is indeed the problem, the next step would be to make sure that DIS.init() is only used to reset states/variables, and that it doesn't create a lot of double bindings or conflicting events.

You can handle this by adding a...

$(".nav a").unbind("click");

But if there is no specific reason to unbind & rebind, it's better to just leave it be and fix the structure instead.

Answer 2

Ok, So I finally figured out the problem. It seems that there was a problem with some naming conventions. I was trying to load .content into .content, and that was caused the problem. I changed the class name on the div I was loading .content into, and that solved the problem.