javascript - Why does my event handler cause an "is not a function" error, but works from the Firebug console?

admin管理员组

文章数量:1208155

Using JQuery 1.2.6, testing from Firefox 3 and IE7. I have a very basic bit of JavaScript to reload a captcha image. In my JS file, I have:

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++;
    }
}

My link looks as follows:

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

When I click on the link, I get a JavaScript error. From the Firebug plugin for Firefox, it says "Captcha.Refresh" is not a function. So, I go to my Firebug console in the same window, and type

Captcha

And I get an "object" in the response line (as expected). I then type

Captcah.Refresh

And I get a function() in the response line (as expected). I then type

Captcha.Refresh()

And it executes the function, updates my captcha image, everything is dandy. If I go back and try the link again, it still does not work. If I type in Capcha.Refresh() into the console without ever hitting the link, it also works fine. What on earth am I missing here? Clearly the JS is getting loaded, but why doesn't that function call work?

Using JQuery 1.2.6, testing from Firefox 3 and IE7. I have a very basic bit of JavaScript to reload a captcha image. In my JS file, I have:

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++;
    }
}

My link looks as follows:

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

When I click on the link, I get a JavaScript error. From the Firebug plugin for Firefox, it says "Captcha.Refresh" is not a function. So, I go to my Firebug console in the same window, and type

Captcha

And I get an "object" in the response line (as expected). I then type

Captcah.Refresh

And I get a function() in the response line (as expected). I then type

Captcha.Refresh()

And it executes the function, updates my captcha image, everything is dandy. If I go back and try the link again, it still does not work. If I type in Capcha.Refresh() into the console without ever hitting the link, it also works fine. What on earth am I missing here? Clearly the JS is getting loaded, but why doesn't that function call work?

• javascript
• jquery

Share Improve this question Follow edited Jul 31, 2010 at 19:57 Shog9 160k3636 gold badges235235 silver badges240240 bronze badges asked Feb 10, 2009 at 19:32 MattMatt 41.8k3030 gold badges111111 silver badges149149 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 14

The problem arises because you have an element with an id of Captcha, and a global variable with the same name. IE traditionally introduces a global variable for every id attribute. FF doesn't... but pretends it does in certain situations for compatibility with IE. In this case, the click handler sees Captcha as an element rather than your object.

Work-arounds:

Change the id of the Captcha element.

Or, change the name of your global object to something other than Captcha.

Or, use Pim Jager's technique to move interpretation of the handler into a context where the global Captcha variable has been overwritten with your own.

Or, change your onclick attribute to:

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

...this will force lookup of the Captcha property in the context where it has been replaced by your global variable.

(all of these tested in IE6 and FF3 - i recommend Pim Jager's answer)

Try sepperating the HTML and javascript:

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

本文标签：