javascript - 为什么我的事件处理程序会导致 "is not a function"错误，但可以从 Firebug 控制台运行？

Question

使用 JQuery 1.2.6，从 Firefox 3 和 IE7 进行测试。我有一些非常基本的 JavaScript 来重新加载验证码图像。在我的 JS 文件中，我有:

var Captcha = {
    count: 0,

    Refresh: function(){
        // Concatenate "count" to force a URL change, which forces the browser to reload the image
        $('#Captcha').attr('src', 'Captcha.aspx?' + Captcha.count);
        Captcha.count++;
    }
}

我的链接如下所示:

<a href="javascript:void(0);" id="ChangeCaptcha" onclick="Captcha.Refresh();">Try a different image</a>

当我点击链接时，出现 JavaScript 错误。在 Firefox 的 Firebug 插件中，它说“Captcha.Refresh”不是一个函数。因此，我在同一个窗口中转到我的 Firebug 控制台，然后键入

Captcha

然后我在响应行中得到一个“对象”(正如预期的那样)。然后我输入

Captcah.Refresh

然后我在响应行中得到一个 function()(如预期的那样)。然后我输入

Captcha.Refresh()

然后它执行函数，更新我的验证码图像，一切都很好。如果我返回并再次尝试链接，它仍然不起作用。如果我在控制台中输入 Capcha.Refresh() 而没有点击链接，它也可以正常工作。我到底想念什么？显然 JS 正在加载，但为什么该函数调用不起作用？

Answer 1

出现问题是因为您有一个 ID 为 Captcha 的元素，以及一个同名的全局变量。 IE 传统上为每个 id 属性引入一个全局变量。 FF 不......但假装它在某些情况下与 IE 兼容。在这种情况下，click 处理程序将验证码视为一个元素，而不是您的对象。

解决方法:

更改 Captcha 元素的 id。

或者，将全局对象的名称更改为 Captcha 以外的名称。

或者，使用 Pim Jager's technique将处理程序的解释移动到全局验证码变量已被您自己的变量覆盖的上下文中。

或者，将您的 onclick 属性更改为:

onclick="window.Captcha.Refresh();"

...这将在已被全局变量替换的上下文中强制查找 Captcha 属性。

(所有这些都在 IE6 和 FF3 中测试过 - 我推荐 Pim Jager 的回答)