函数内部的Javascript变量

我是javascript新手，我想了解为什么这不起作用：

var firstName = $("#firstName").val();

$("#account").on('submit', function() {
     console.log(firstName); // Empty value
});

---

jsIDLE:

您将获得输入的初始值并将其存储在字符串变量中。而是将jQuery对象引用存储在变量中，并随时获取值

var firstName = $("#firstName");

$("#account").on('submit', function() {
  console.log(firstName.val());
});

var firstName=$（“#firstName”）；
$（“#帐户”）。在（'submit'，function（）上{
console.log（firstName.val（））；
});
按照编写代码的方式，它会在首次加载页面时获取firstname字段的值，并将其存储在变量
firstname
中。然后，稍后它将存储的值输出到控制台。如果需要该字段的当前值，则必须在输出时获取当前值，如下所示：

$("#account").on('submit', function() {
     var firstName = $("#firstName").val();   // get current value
     console.log(firstName); 
});

要使其工作，请在提交时获取输入值，而不是在提交之前

$("#account").on('submit', function() {
     var firstName = $("#firstName").val();
     console.log(firstName); // non-empty value
});

因为它总是保持默认值。您需要在提交表单时获取值

var firstNameDefault = $("#firstName");

$("#account").on('submit', function() {
    var firstNameAfterClick = $("#firstName");
    console.log(firstName.val()); // Empty value
    console.log(firstNameAfterClick.val()); // Should display value of #firstName after form is submitted
});

它实际上在工作。只是变量
username
没有从
$（“#firstName”）

以下是正在发生的事情的示例：

var firstName = $("#firstName").val(); // this line says that get the value of #firstName

例如，
#firstName
是一个文本框，它可能有一个空值，因为您没有给它赋值。除非在第一行上指定任何值，否则第一行将始终具有空数据

$("#account").on('submit', function() {
     console.log(firstName); // Empty value
});

当提交
#account
时，在控制台中打印
firstName
中的内容。但是您得到的前一个值是空的，因为您检索了
#firstName
的最早的值。
如果要打印
#firstName
的当前或最新值，请查看其他人的答案。
我刚才解释了代码中的实际情况。
我假设您在
#firstName
中有一个默认值，您希望在浏览器控制台中看到默认值而不做任何更改。对于表单的提交，页面正在刷新，因此您无法看到控制台值。所以只需再添加一行
return false
以查看控制台中的

<script>
    var firstName = $("#firstName").val();

    $("#account").on('submit', function() {
        console.log(firstName); 
        return false;
    });
</script>


var firstName=$（“#firstName”）.val（）；
$（“#帐户”）。在（'submit'，function（）上{
console.log（名字）；
返回false；
});

***不要忘记删除
返回false调试完成后，否则表单将不会提交到服务器
 是啊！就这样。完全按照我的需要工作（使用外部函数（）{}）；。非常感谢你。
<script>
    var firstName = $("#firstName").val();

    $("#account").on('submit', function() {
        console.log(firstName); 
        return false;
    });
</script>