Question

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

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

如果您首先点击＆＃34; Omgivelserne＆＃34;，然后点击＆＃34; Skriv挖掘＆＃34;，那么页面＆＃34; Skriv挖掘＆＃34;，似乎正在加载两次，从渐变过渡判断？

我的JS for Ajax和Transitions（编辑只显示相关代码）：

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（）仅被触发一次，并且不会将两个click事件绑定到菜单链接。

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

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

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

和

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

不是最好的思考解决方案，但它是确定问题所在的方法。

编辑：一旦确认这确实是问题，下一步将确保DIS.init（）仅用于重置状态/变量，并且它不会创建大量的双重绑定或相互冲突的事件。

您可以通过添加...

来处理此问题

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

但如果没有具体理由解开＆amp;重新绑定，最好留下它并修改结构。

Answer 2

好的，所以我终于找到了问题所在。似乎某些命名约定存在问题。我试图将.content加载到.content中，这导致了问题。我更改了我正在加载.content的div上的类名，这解决了问题。

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

2 个答案: