javascript - JQuery 中 ("click") 函数中的“奇怪”变量赋值行为

Question

我是 javascript 和 jquery 的新手，遇到了一个小问题。最新版本的 Chrome 和 Firefox 都会出现这种情况，因此我认为这不是浏览器问题。

相关代码在这里(这是HTML页面script标签内的自调用函数)。

(function () {
    "use strict";
    var submitbutton = $('#submitcommand'),
        textinput = $('#textinput'),
        userinput = textinput.val();

    submitbutton.on('click', function() {
        alert("textinput is " + textinput.val());   // => works
        alert("userinput is " + userinput);     // => undefined

    });
}());

对 alert() 的第一次调用使用“textinput.val()”就可以正常工作。第二次调用 alert() 不会返回任何可见文本，因为“userinput”的计算结果为“undefined”。

我已经尝试进入 Firebug 控制台并将四个语句(两个赋值和对 alert() 的两个调用)一个接一个地粘贴进去。这行得通，并让我得到了我期望的结果。

所以问题是:on('click') 函数中的 'userinput' 变量发生了什么变化？我在这里没有看到什么？

提前致谢!

Answer 1

由于该函数是自调用的，因此该变量将在页面加载时设置。每次单击按钮时都不会重新评估。在页面加载期间，您可能会发现:

1. 输入为空
2. 输入比脚本在页面下方(我认为更有可能)

所以在设置的时候是没有值的。您可能希望将变量的范围限定为单击按钮:

(function () {
    "use strict";
    var submitbutton = $('#submitcommand'),
        textinput = $('#textinput')

    submitbutton.on('click', function() {
        var userinput = textinput.val();

        alert("textinput is " + textinput.val());   // => works
        alert("userinput is " + userinput);     // => undefined

    });
}());

此外，您还需要确保脚本 block 位于页面底部，因为调用该函数时所有 UI 元素都将加载到浏览器中。