Why Does My Event Handler Cause An "is Not A Function" Error, But Works From The Firebug Console?

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, Ref

Solution 1:

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)

Solution 2:

Try sepperating the HTML and javascript:

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