Javascript 函数意外触发

我有一个函数，它淡出一个div，加载替换HTML，然后淡入该div。当我单击顶部的导航栏将内容加载到

#main

div中时（正确地）调用了此函数。在“关于”页面上也调用了此函数以加载不同的团队配置文件

更改默认团队配置文件时会出现此错误。单击以查看另一个配置文件时，该功能会重复单击该配置文件之前发生的每一次“#main”更改

该网站是。单击“关于”，然后单击另一个配置文件，例如“B”，可以复制可见的错误。配置文件闪烁，但未选中。在第一次打开后选择轮廓效果良好

淡入/淡出和加载功能：

/* ajax load into $(sel) from newView (e.g. about.html) */
function loadView(sel, newView, checkOrCb, cb) {
    // one of these events will be called when animations end
    var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
    // cache element to change
    var elem = $(sel);

    // if there is a check and callback, do the check
    if (cb) {
        // if the check fails, exit
        if (!checkOrCb(elem, newView))
            return 1;
    }

    // animate out
    elem.addClass("animated fadeOut");
    // when finished load new page and animate in
    elem.one(animationEnd, function() {
        // remove fadeOut animation (while keeping elem hidden)
        elem.css("opacity", 0).removeClass("fadeOut");
        // load new page, then fadeIn
        elem.load(newView, function(text, response, ev) {
            elem.addClass("fadeIn");
            // remove opacity style and animations
            elem.one(animationEnd, function() {
                elem.css("opacity", "").removeClass("animated fadeIn");
            });
            // do the callback if one exists
            if (cb) {
                cb(elem, newView, text, response, ev);
            }
            else if (checkOrCb) {
                checkOrCb(elem, newView, text, response, ev);
            }
        });
    });
}

导航栏侦听器：

$(".nav_entry").on("click", function() {
    loadView("#main",
        `${$(this).attr("data-link")}.html`,
        function(dummy, newPage) {
            return getCurrentPage() != newPage.replace(".html", "");
        },
        function(dummy, newPage) {
            window.location.hash = newPage.replace(".html", "");
        });
});

$(".about_icon").on("click", function() {
    var target = $(this);
    loadView("#about_info", `about/${this.innerText.toLowerCase()}.md`, function() {
        return !target.hasClass("about_selected");
    }, function() {
        $(".about_selected").removeClass("about_selected");
        target.addClass("about_selected");
    });
});
// set 2900 team profile as default
$("#about_info").load("about/2900.md");
$(".about_icon:contains(2900)").addClass("about_selected");

关于听众：

$(".nav_entry").on("click", function() {
    loadView("#main",
        `${$(this).attr("data-link")}.html`,
        function(dummy, newPage) {
            return getCurrentPage() != newPage.replace(".html", "");
        },
        function(dummy, newPage) {
            window.location.hash = newPage.replace(".html", "");
        });
});

$(".about_icon").on("click", function() {
    var target = $(this);
    loadView("#about_info", `about/${this.innerText.toLowerCase()}.md`, function() {
        return !target.hasClass("about_selected");
    }, function() {
        $(".about_selected").removeClass("about_selected");
        target.addClass("about_selected");
    });
});
// set 2900 team profile as default
$("#about_info").load("about/2900.md");
$(".about_icon:contains(2900)").addClass("about_selected");

请问我怎样才能修复这个错误？如果有人对我错过的JavaScript约定有任何建议，请随时将其添加到您的答案/评论中：）

这篇文章回答了我的问题/修复了错误

问：过渡结束了。。。但它在谷歌浏览器上运行了2次

答：这是因为Chrome将在WebKitt transitionend和transitionend事件上启动

我用来查看每个对象附加了哪些（以及有多少）事件侦听器。这表明在

#main

上有很多端点转换侦听器。我在谷歌上搜索“jquery

one

notworking”，第一个结果就是上面引用的答案

解决方案是使用您自己的alreadyFired变量，以确保它只触发一次

var animationEndFired = false;
elem.addClass("fadeIn");
// remove opacity style and animations
elem.one(animationEnd, function() {
    // if only fire once
    if (animationEndFired)
        return;
    animationEndFired = true;

---

你在用checkOrCb做什么？嗨@DarkMatterMatt。如果您可以在、代码笔或类似的东西中创建一个“玩具”或单独的示例，这将非常有帮助。1） 对于不熟悉整个网站的人来说，了解问题所在往往很困难，因为有很多干扰因素，2）正在开发的网站将要发生变化，3）我们无法编辑代码、测试内容和打印诊断。话虽如此，您可能希望查看

preventDefault

和

stopPropagation

，因为它们停止了事件触发后发生的默认级联。@RobinMackenzie

checkOrCb

是一个可选函数，如果使用四个参数调用

loadView

，则该函数是一个检查（仅当check==true时继续），如果使用三个参数调用

loadView

，则为回调@谢谢，我会调查一下的，有时间我会尽快弄一个密码笔