1

我是 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

    });
}());

使用“textinput.val()”第一次调用 alert() 就可以了。对 alert() 的第二次调用不返回任何可见文本，因为“用户输入”正在评估为“未定义”。

我尝试进入 Firebug 控制台并一个接一个地粘贴四个语句（两个分配和两个对 alert() 的调用）。这行得通，并得到我期望的结果。

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

提前致谢！

4

4 回答 4

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

    });
}());

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

于 2012-12-12T13:09:53.183 回答
1

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

你也许应该这样使用它：

(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：或者这可能会在这里提供更多的洞察力。如果你这样做：

You will still need to re-access the variable however if you wish to have the "current" value of the input, not that in the "undefined" state during the initial execution due to the parse/execute cycle of the Javascript. The "re-access" of the .val(); vs the value during the initial script execution is the key to that "undefined" value. and setting it "inside" the handler gets the current value.

于 2012-12-12T13:18:29.180 回答
0

什么时候

var userinput = textinput.val()

被评估：

  1. textinput可能还不存在 - 您必须在document.ready()处理程序中，或者该<script>块必须#textinput在 DOM 中。
  2. 如果它确实存在，则userinput获取其当前值，而不是它可能碰巧具有的任何未来值。
于 2012-12-12T13:07:58.270 回答
0

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

说得通？:)

于 2012-12-12T13:09:27.617 回答