Почему странно работает js в firefox?

Question

[Antiless]

Есть примерно такой код:

<select id="free_size" name="free_size">...</select>

/* этот код идет сразу после элемента выше*/
jQuery('#free_size').change(function () {
    ...
});
...
/*этот код подключается в футере через внешний файл*/
jQuery(window).load(function() {
            ...
            setTimeout(function() {
                ... 
                /*$ это prototypeJs; вообще, скриптов различных много (магазин), но не думаю, что это очень важно*/
                $('free_size').triggerEvent('change');
                ...
            }, 2900);
}
...
Element.prototype.triggerEvent = function(eventName)
{
    if (document.createEvent)
    {
        var evt = document.createEvent('HTMLEvents');
        evt.initEvent(eventName, true, true);
        return this.dispatchEvent(evt);
    }

    if (this.fireEvent)
        return this.fireEvent('on' + eventName);
};

Он хорошо работает в хроме/хромиуме/эксплорере, но не работает в огнелисе. Конкретно, нет реакции на диспатч. Однако, если добавить alert перед диспатчем ИЛИ брейкпоинт в отладчике поставить на него, то все хорошо срабатывает и работает как надо. Предполагаю, что привязка события к элементу просто не успевает инициализироваться, но в других же браузерах все хорошо.
Буду очень рад, если кто-нибудь объяснит эту магию :-)

Answer 1

[Денис Инешин]

Если у вас подключен jQuery, то все что вам нужно сделать это $('free_size').trigger('change');
Дальше всю кроссбраузерность возьмет на себя jQuery.

Comments

[Antiless]

не сработало, равно так же не сработало document.getElementById().onchange()

[Денис Инешин]

Antiless: окей, сделайте демо на jsfiddle, посмотрим что можно сделать.

[trushka]

Antiless: не сработало из-затого, что "$ это prototypeJs" - в нём нет встроенного метода trigger(). А в jQuery - есть.

[Antiless]

trushka: ну так понятно, что я не "$" использовал, а "jQuery"

[trushka]

А, ну так бы и сразу)) Тогда, скорее всего, на селекте ещё какойто обработчик change висит, который срабатывает перед вашим и отменяет событие. Насколько я помню, очерёдность срабатывания обработчиков может быть разной в зависимости от браузера. А jQuery вызывает установленные с помощью него обработчики в той очерёдности, в которой они создавались, и результат должен быть одинаковым в зависимости от браузера

Answer 2

[trushka]

Думаю, что проблема кк раз в том, что "$ это prototypeJs"
То есть, либо jQuery вместо $ везде писать, либо оборачивать весь jQuery код в (function($){...})(jQuery)
Ещё можно попробовать обратно присвоить $=jQuery, если это не поломает код, использующий prototypeJs

Comments

[Antiless]

Тогда почему в других браузерах это работает? Причем в фф тоже работает, если вызывать в других местах

[trushka]

В других браузерах костыль работает) Чем разбираться, почему он не везде работает, лучше использовать встроенный в jQuery триггер - jQuery('free_size').trigger('change'). А если уже и в этом случае будет глючить - тогда уже надо разбираться.

Вообще, думаю, причина может быть ещё в том, что в современных браузерах есть встроенные функции $ и $$, аналогичные ттем, что в prototypeJs. И могла какая-то путаница возникнуть, тем более, что они вроде как не очень явные - я не в курсе особо, но если на странице about:blank через адресную строку запустить javascriptalert($('body')), то в консоль выдаст ошибку, но если перед этим в консоли присвоить какой-то меременной, например var a=$, то вышеприведенный код с этой переменной вместо $ сработает. Кстати, это ещё может быть из-за jQuery.noconflict()

[Antiless]

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

[trushka]

Ну, видно, какая-то особенность FF. Возможно для change надо особое событие создавать (вот для вызова keydown надо создавать KeyboardEvent, например, недавно тут вопрос об этом был). Во всяком случае в jQuery эти подводные камни давно обошли, и почему не пользоваться готовым решением - не очень понятно, если jQuery и так уже подключён

[Antiless]

trushka: вот я хочу выяснить что за она. код triggerEvent() фактически взят с MDN. и change квери, прототайпа и натива не работает, значит проблема в том, что, биндов нет на момент вызова, но бинды вызывается раньше, что я собственно и описал в сабже