Не ловит евент submit из подключенного js, куда копать?

Question

[ThunderCat]

Задача: Словить срабатывание формы на страничке.
Есть следующий код:

$(document).ready(function () {
    $(document).on('submit','form',function(e){
          alert('wtf?');
     })
})

во внешне подключаемом js есть код следующего содержания, срабатывающий по клику на определенный элемент:

h.redirect = function (a, b) {
        var c = k.createElement("form");
        c.action = b;
        c.method = "post";
        c.target = "_top";
        c.style.display = "none";
        var d = k.createElement("input");
        d.type = "hidden";
        d.name = "token";
        d.value = a;
        c.appendChild(d);
        k.body.appendChild(c);
        c.submit()
    }

Внимание вопрос: При c.submit() ничего не ловится, не растет кокос не выходит алерт, но форма срабатывает и субмит происходит. Как словить евент, или хоть объясните почему такая лажа? Неужели c.submit() не создает евента?

UPD: Всем спасибо, я тупой лось, не посмотрел ни код толком, ни фак где описан коллбэк без субмита.

Comments

[MeGaBoJIbT]

Создает эвент. С этим все нормально.
Ваш верхний код срабатывает раньше нижнего? Тогда это происходит потому что на форме созданной из js обработчика нет. Потому что не было этой формы когда обработчик вешали.

[Kovalsky]

Насколько я понимаю, нативный submit не создаёт ивента, т.к. это конечный метод фактически реализующий отправку, без всяких ивентов. Но раз используется $, то можно же им триггерить:

$( c ).submit();

Или нельзя?

Кстати, нативный dispatchEvent вместо submit тоже работал бы как полагается.

[MeGaBoJIbT]

Нужно понимать что выборки по DOM из jquery вообще говоря "мертвые" то есть не обновляются сами по себе а делаются один раз по существующему дому. В DOM API есть некоторое количество самообновляющихся "живых" выборок, но не стоит подразумевать что любая выборка живая то есть автоматически обновится когда вы что-то в дом добавите. И живые выборки местами почитают за ошибку дизайна API потому что они драматически мешают ускорить DOM в наше время, не привыкайте к ним

[ThunderCat]

MeGaBoJIbT, Верхний код срабатывает не раньше и не позже, а по загрузке документа, а так же обработчик висит не на форме(так как ее еще нет), а на документе, и ловит событие от элемента формы(любой).

[MeGaBoJIbT]

ThunderCat, *Глубокий вдох*.
Не от любой формы. А только от формы существующей в данный момент. Второй код создает у вас новую форму. Если код привязки обработчика выполнится раньше то на этой форме ничего нету.

А он вполне может выполниться раньше, потому что выполнение js создающего новую форму скорее всего происходит уже после того как DOM готов (но чтобы быть уверенным на сто процентов нужно больше кода

[ThunderCat]

MeGaBoJIbT, другими словами, формы добавленные в документ после построения не будут обрабатываться листенером повешенным на документ? Что то не верится, у меня есть несколько мест где формы замечательно подгружаются и взаимодействуют по ссылке через $(document).('submit','form' function(e){})

[ThunderCat]

Никита Полевой,

Насколько я понимаю, нативный submit не создаёт ивента,

похоже на то, однако так как скрипт не с моего сайта подгружается сделать с этим я ничего не могу. Единственный кривой вариант - скачать скрипт локально, поменять код, например добавив вызов какого-то евента или вызов своего скрипта вместо субмита.
Минус решения - при изменении скрипта на сервере провайдера получим неработающий функционал.

[Антон Швец]

MeGaBoJIbT, он вешает слушатель на не формы, а на document. А 'form' это уже фильтр. Будьте внимательнее.

Дело в этом
https://learn.javascript.ru/forms-submit#%D0%BC%D0...

Чтобы отправить форму на сервер из JavaScript – нужно вызвать на элементе формы метод form.submit().

При этом само событие submit не генерируется. Предполагается, что если программист вызывает метод form.submit(), то он выполнил все проверки.

Это используют, в частности, для искусственной генерации и отправки формы.

Answer 1

[Kovalsky]

Вообще это не очень круто, что сторонний скрипт позволяет себе такие вольности типа непосредственного вызова submit, или может он какой специфичный. Такой подход не оставляет другого выбора, кроме декорирования:

(() => {
    var old_submit = HTMLFormElement.prototype.submit;

    HTMLFormElement.prototype.submit = function() {
        var form = this,
            args = Array.prototype.slice.call(arguments),
            submit_event = new Event('submit', {
                bubbles: true,
                cancelable: true
            });

        submit_event.original_submit = function() {
            old_submit.apply(form, args);
        };

        form.dispatchEvent(submit_event);
    }
})();

$(() => {
    var my_form = $( 'form' )[0];

    $( document )
        .on('submit', 'form', function(e) {
            alert('wtf?');
            e.originalEvent.original_submit();
        })
        .on('click', 'button', function() {
            my_form.submit();
        });
})

Суть в том, чтобы при вызове сабмита выкидывать (bubbling) объект ивента в котором и лежит ссылка на оригинальный сабмит, который является единственным способом послать форму. Это ужас, кошмар и ад, и я бы так никогда не стал делать, но чо-то ничего лучше не придумал.