Почему мой обработчик событий вызывает ошибку «не является функцией», но работает из консоли 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. В плагине Firebug для Firefox говорится, что «Captcha.Refresh» не является функцией. Итак, я иду в консоль Firebug в том же окне и набираю

Captcha

И я получаю «объект» в строке ответа (как и ожидалось). Я тогда наберу

Captcah.Refresh

И я получаю функцию () в строке ответа (как и ожидалось). Я тогда наберу

Captcha.Refresh()

И он выполняет функцию, обновляет мой каптч-образ, все денди. Если я вернусь и попробую ссылку еще раз, она все равно не будет работать. Если я ввожу Capcha.Refresh () в консоль, не нажимая на ссылку, это также работает нормально. Чего мне здесь не хватает? Очевидно, что JS загружается, но почему этот вызов функции не работает?

Answer 1

Проблема возникает из-за того, что у вас есть элемент с идентификатором Captcha и глобальная переменная с тем же именем. IE традиционно вводит глобальную переменную для каждого атрибута id. FF не ... но делает вид, что делает это в определенных ситуациях для совместимости с IE. В этом случае обработчик click видит капчу как элемент, а не как ваш объект.

обходные:

Изменить идентификатор элемента Captcha.

Или измените имя вашего глобального объекта на другое, отличное от Captcha.

Или используйте технику Pim Jager , чтобы переместить интерпретацию обработчика в контекст, где глобальная переменная Captcha была перезаписана вашей собственной.

Или измените свой атрибут onclick на:

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

... это заставит искать свойство Captcha в контексте, где оно было заменено вашей глобальной переменной.

(все они протестированы в IE6 и FF3 - я рекомендую ответ Пим Джагер)

Answer 2

Попробуйте разделить HTML и JavaScript:

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