Question

并提前抱歉我不知道我遇到的问题的术语。基本上这个硬编码版本按预期工作：

$("#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毫秒（包括＆＃39;选择＆＃39;链接更新）然后清空#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;
}

硬编码版本非常流畅。有人可以解释为什么会发生这种情况以及如何解决这个问题？感谢

Answer 1

在第二个版本中，我唯一看错的是你失去了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();
});

函数的作用与硬编码的参数不同

1 个答案: