为什么我的事件处理程序会导致"不是函数"错误,但是可以从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

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

Captcha.Refresh()

它执行功能,更新我的验证码图像,一切都很花哨.如果我回去再次尝试链接,它仍然无效.如果我在控制台中键入Capcha.Refresh()而没有点击链接,它也可以正常工作.我到底在这里错过了什么？显然JS正在加载,但为什么函数调用不起作用？

Answer 1

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

变通办法:

更改Captcha元素的id .

或者,将全局对象的名称更改为除以外的名称Captcha.

或者,使用Pim Jager的技术将处理程序的解释移动到全局Captcha变量已被您自己覆盖的上下文中.

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

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

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

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

Answer 2

尝试分离HTML和javascript:

$('#ChangeCaptcha').click(Captcha.Refresh);