JQuery没有在.blur（）中执行已定义的函数

Question

I'm very new to JQuery and Javascript in general, and I'm working on a project for school. While I can get everything to work without defining any functions, I want to reduce redundant code.

Here's a bit of what I'm trying to do:

function firstNameChanged() {
    var x = document.getElementById("firstName").value;

    if (x == null || x == "") {
        $("#firstNameError").html(" First name can't be blank!");
    }
    else {
        $("#firstNameError").html("");
    }
}

$(document).ready(function(){   

$("#firstName").blur(firstNameChange());
}

Yes I'm positive all IDs exist, because the code works when I pass it as:

$("#firstName").blur(function(){
    var x = document.getElementById("firstName").value;

    if (x == null || x == "") {
        $("#firstNameError").html(" First name can't be blank!");
    }
    else {
        $("#firstNameError").html("");
    }
})

I've looked up plenty of documentation on Javascript and JQuery syntax, debugged in Chrome, I can't figure it out.

Answer 1

blur expects a function reference as a parameter. firstNameChange() is calling the function immediately. Remove the ()

$("#firstName").blur(firstNameChange);