Question

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

相关代码在这里（这是HTML页面上脚本标记内的自调用函数）。

(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

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

输入是emtpy
输入位于页面下方而不是脚本（我认为更有可能）

所以在设定时没有价值。您可能希望将变量作用于按钮单击：

(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

    });
}());

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

Answer 2

您的值在处理程序中未定义。

您应该这样使用它：

(function() {
    "use strict";
    var submitbutton = $('#submitcommand'),
        textinput = $('#textinput')
        userinput = textinput.val();
    submitbutton.on('click', function() {
        userinput = textinput.val();// sets the value in the handler
        alert("textinput is " + textinput.val()); 
        alert("userinput is " + userinput); 
    });
}());

工作示例：http://jsfiddle.net/avCay/

请注意，由于变量的范围和事件处理程序中值的“重置”，因此这种方式起作用。第一个传递解析脚本，第二个传递执行它，后续事件处理程序触发submitbutton元素的click事件，在该事件期间设置该点的值。

编辑：注意：关于jQuery读取/加载换行（如我的示例小提琴），如果您不希望如此，您可以： $('#submitcommand').on('click', function() { 而不是变量，jQuery将正确地将事件处理程序挂钩到元素。

EDIT2：或者这可能会提供更多见解。如果你这样做：

如果您希望获得输入的“当前”值，而不是因为Javascript的解析/执行周期而在初始执行期间处于“未定义”状态，则仍需要重新访问该变量。 .val（）的“重新访问”; vs初始脚本执行期间的值是“未定义”值的关键。并将其设置为“内部”处理程序获取当前值。

Answer 3

当

var userinput = textinput.val()

评估

：

textinput可能尚不存在 - 您必须位于document.ready()处理程序中，或<script>块必须位于DOM中的#textinput之后。
如果存在，userinput将获取其当前值，而不是它可能发生的任何未来值。

Answer 4

这是因为页面加载时#textinput的值为空（除非您在页面加载时将值设置为某个值）。因此userinput中的存储值为空。当您从事件处理程序中的textinput读取值时，它会查找输入字段的值。

有道理吗？：）

JQuery on（“click”）函数中的“Strange”变量赋值行为

4 个答案: