Function acts differently with hardcoded arguments

Question

and sorry in advance that I do not know the terminology for the problem that I am experiencing. Essentially, this hard-coded version works as expected:

$("#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;
}

but the version below pauses for 500 ms (including the "selected" link update), then omitting #content and going directly to 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;
}

The hardcoded version is nice and smooth. Can someone explain why this is happening and how to get around this? Thanks

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 way

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