javascript - 我的 jQuery 加载请求被调用两次吗？

Question

我有这个网站:http://wearewebstars.dk/poc/index.html 如果您单击顶部菜单，则会向另一个页面发出 Ajax 请求。如果您再次单击，则会向另一个页面发出新请求，依此类推...

但是，似乎如果我单击顶部导航一次，那么它会加载新页面，然后如果我单击顶部导航中的另一个链接，那么它似乎会加载页面两次还是什么？我不太明白它为什么这样做？

如果您首先单击“Omgivelserne”，然后单击“Skriv dig op”，那么从淡入淡出过渡来看，“Skriv dig op”页面似乎加载了两次？

我的 Ajax 和转换 JS(编辑为仅显示相关代码):

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

如果您更改以下内容，我认为将不再有“双击”。这将确保 TopNavigation() 仅触发一次，并且不会将两个点击事件绑定(bind)到菜单链接。

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

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

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

和

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

这不是经过深思熟虑的最佳解决方案，但它是确认问题所在的一种方法。

编辑:一旦确认这确实是问题所在，下一步就是确保 DIS.init() 仅用于重置状态/变量，并且不会创建大量双重绑定(bind)或冲突事件。

您可以通过添加...来处理此问题

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

但如果没有具体原因需要解除绑定(bind)和重新绑定(bind)，最好就保留它并修复结构。