jquery - 对于硬编码的参数，函数的行为有所不同

事先很抱歉，我不知道我遇到的问题的术语。
基本上这个硬编码版本按预期工作:

$("#navbar").on("click", "#contactLink", loadContact);

function loadContact () {
    $("#navbar ul li a").removeClass("selected");
    $("#contactLink").addClass("selected");
    $("#page").fadeOut(500, function(){
        $("#content").load("TGCContact.html .insert", function() {
            $("#page").fadeIn(1000);
        });
    });
    return false;
}

但以下版本暂停了 500 毫秒(包括“选定”链接更新)，然后清空 #content 并直接跳转到fadeIn():

$("#navbar").on("click", "#contactLink", function(){
    loadContact('TGCContact.html .insert', '#contactLink');
});

function loadContact (htmlPage, newLink) {
    $("#navbar ul li a").removeClass("selected");
    $(newLink).addClass("selected");
    $("#page").fadeOut(500, function(){
        $("#content").load(htmlPage, function() {
            $("#page").fadeIn(1000);
        });
    });
    return false;
}

硬编码版本很好而且很流畅。有人可以解释为什么会发生这种情况以及如何解决吗？
谢谢

最佳答案

我在第二个版本中唯一看到的错误是您失去了 return false 旨在防止默认行为的效果(event.preventDefault() 通常更适合)。

因此，如果没有 HTML，人们可以假设那里有一个 URL，并且页面会做一些可能会导致不需要的效果的事情。

所以你可以这样返回被调用函数的结果

$("#navbar").on("click", "#contactLink", function(){
    return loadContact('TGCContact.html .insert', '#contactLink');
});

或者干脆在函数中丢失 return false 并在处理程序中执行

$("#navbar").on("click", "#contactLink", function(){
    loadContact('TGCContact.html .insert', '#contactLink');
    return false;
});

event.preventDefault 方式

$("#navbar").on("click", "#contactLink", function(event){
    loadContact('TGCContact.html .insert', '#contactLink');
    event.preventDefault();
});

关于jquery - 对于硬编码的参数，函数的行为有所不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25676571/