在 $(document).ready() 函数中设置的 jQuery 值

Question

我想在 DOM 完全加载后为对象设置值。问题是，从文本框调用OnBlur和OnFocus事件后，我收到空指针异常。我做错了什么？

JavaScript：

$(document).ready(function () {
    var sumThursdayHrs = $('span[id*="lblThursdayHrs"]').last()
});
var tempThursdayHrs = 0.0;
function BlurThursdayHrs(sender, args) { sumThursdayHrs.text(tempThursdayHrs + sender.get_value()); }
function FocusThursdayHrs(sender, args) { tempThursdayHrs = sumThursdayHrs.text() - sender.get_value(); }

标记：

<telerik:RadNumericTextBox ID="txtThursdayHrs" runat="server" NumberFormat-DecimalDigits="1"
        Width="25px" MinValue="0" Type="Number" DbValue='<%# Eval("ThursdayHrs") %>'>
        <ClientEvents OnBlur="BlurThursdayHrs" OnFocus="FocusThursdayHrs" />
</telerik:RadNumericTextBox>

错误：

Microsoft JScript 运行时错误："sumThursdayHrs"未定义

Answer 1

正如您在标题中所说，这些值是在函数（ready-event-handler 函数）中设置的。但是 JavaScript 具有函数作用域，并且由于您使用 var 关键字将sumThursdayHrs声明为局部（不是说"私有"）变量，因此它是未从外部定义的。两种可能性：

• 使 sumThursdayHrs 成为全局变量（删除 "var"） （并最终在外部声明它）。请注意，应尽可能避免使用全局变量，以防止命名冲突和
• 或者将使用它的所有函数都放在同一个范围内。请注意，这些函数也将不再全局可用，因此您需要在同一上下文中设置模糊/焦点处理程序（如 Patrick Scott 建议的那样）。

Answer 2

如果你已经在使用jQuery，为什么不将事件与jquery绑定呢？

$('span[id$="txtThursdayHrs"]:first').on("focus", FocusThursdayHrs)
          .on("blur", BlurThursdayHrs);

此外，在 doc ready 函数中声明这些函数，以便它们可以访问sumThursdayHrs，或者在同一位置使用匿名函数，而不是调用函数

前任：

$(document).ready(function () {
    var sumThursdayHrs = $('span[id*="lblThursdayHrs"]').last();
    var tempThursdayHrs = 0.0;
    $('span[id$="txtThursdayHrs"]:first').on("focus", function() {
        sumThursdayHrs.text(tempThursdayHrs + $(this).val());
    })
    .on("blur", function() {
        tempThursdayHrs = sumThursdayHrs.text() - $(this).val();
    });
});

或者sumThursdayHrs移动到全局对象...为了理智起见，我建议不要把它放在窗口里。

而是定义一个全局命名空间来保存特定于应用的全局变量。这被称为全球减排。

前任。

var MyApp = {};
$(document).ready(function () {
    MyApp.sumThursdayHrs = $('span[id*="lblThursdayHrs"]').last();
    //...

--

MyApp.tempThursdayHrs = 0.0;
function BlurThursdayHrs(sender, args) { MyApp.sumThursdayHrs.text(MyApp.tempThursdayHrs + sender.get_value()); }
function FocusThursdayHrs(sender, args) { MyApp.tempThursdayHrs = MyApp.sumThursdayHrs.text() - sender.get_value(); }

Answer 3

该错误是由于范围：

$(document).ready(function () {
    // sumThursdayHrs is a *local* variable to the function
    var sumThursdayHrs = $('span[id*="lblThursdayHrs"]').last()
});
// ... so this will fail because it is trying to use
// window.sumThursdayHrs (the property sumThursdayHrs on the window object),
// which is not set and thus the Reference Error
function BlurThursdayHrs(sender, args) {
    sumThursdayHrs.text(tempThursdayHrs + sender.get_value());
}

"简单修复"（可能有效，也可能无效）是：

$(document).ready(function () {
    // Set the "global variable" sumThursdayHrs
    // "window." isn't technically required, but it is to show a point.
    window.sumThursdayHrs = $('span[id*="lblThursdayHrs"]').last()
});

快乐编码。

Answer 4

我不确定您给出的代码示例是否在同一个包中，但是如果您在$(document).ready()内定义了一个变量，请知道该变量在闭包内。在它之外，它将是未定义的。

那么为什么不这样做：

$(document).ready(function () {
    var sumThursdayHrs = $('span[id*="lblThursdayHrs"]').last();
    var tempThursdayHrs = 0.0;
    function BlurThursdayHrs(sender, args) {
        sumThursdayHrs.text(tempThursdayHrs + sender.get_value());
    }
    function FocusThursdayHrs(sender, args) {
        tempThursdayHrs = sumThursdayHrs.text() - sender.get_value();
    } 
});

在上面的代码中，它应该选取您想要的值，因为所有内容都在$(document).ready()闭包内。此外，您已经将 jquery 对象 $('span[id*="lblThursdayHrs"]') 分配给变量中，因此它必须在 jquery 环境中使用，而不是在外部使用。简而言之，如果您使用的是jquery，请将其保留在jquery环境中。

你

所做的是，你已经与jquery签署了一份合同，你将通过执行var sumThursdayHrs = $('span[id*="lblThursdayHrs"]').last()来使用它的所有方法和属性。一旦你使用了$(something)，就是这样，它必须在jquery环境中使用。