Задать вопрос
@MyQuestion
junior-middle fullstack

JS: ловлю форму с помощью mutationObserve, слушаю событие отправки формы, но событие не наступает, почему?

Всем привет, есть плагин (auto dialog), в старинной CMS (drupal 7), который собирает форму по клику, без перезагрузки страницы, т.е. с помощью ajax. Мне нужно слушать событие отправки с этой формы и запускать функцию (цели метрики).
Я решил, что в этом мне поможет observe, но что пошло не так. Форму я поймал, событие повесил, в firefox вижу что висит event и мой submit. Но событие не наступает. Форма уходит, а submit'а нет. И функции нет.
Почему так?

let target = document.querySelector('body');

    let observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        let form = document.querySelectorAll('.webform-client-form-176')

        if (mutation.type == 'childList' && mutation.addedNodes[0] != undefined && mutation.addedNodes[0].classList.contains('autodialog-content')) {
          let form = document.querySelector('.webform-client-form-176');
          console.log(form);
          $('.webform-client-form-176').on("submit", function () {
            console.log('test-test-test');
          });
          // form.addEventListener('submit', function (e) {
          //   console.log('test-test-test--234');
          // });

        }

      });
    });

    let config = { attributes: true, childList: true, characterData: true };

    observer.observe(target, config);

    // observer.disconnect();


form.addEventListener
Почему-то не работает. Пишет, что не может прочитать свойство addEventListener, хотя я вроде выцепил правильный селектор.

Добавил тег drupal, потому что возможно, кто-то в курсе темы и уже сталкивался с таким. Есть предположение, что механизм отправки писем там не стандартный. Возможно данные формы сначала попадают в админку, а уже после отправляется письмо друпалом. Я не знаю.

В принципе, я просто хочу убедится, что с точки зрения кода, я всё сделал правильно. Потому что я просто не понимаю, что не так. Задачу свою я решил несколько иначе. С помощью предоставляемого функционала друпала. Просто хочу разобраться, где были ошибки.
  • Вопрос задан
  • 77 просмотров
Подписаться 1 Средний 4 комментария
Решения вопроса 1
szQocks
@szQocks
Я не знаю как ты изучаешь технологию, я хоть и не пишу на валидном, но я за 10 минут прочитал об
MutationObserver

и понял что это просто наблюдатель за дом нодами и всё - он не смотрит за событиями дом нод, он не должен знать о том вызвался ли твой обработчик на форме или нет.

Если же сама дом нода изменилась - например если ты повесишь дата атрибут на форму - твой коллбэк в MutationObserver - будет вызван, так как дом нода изменилась, так же можно и за нодами потомков следить и т.д.

Вот я написал пример - Пример
Пусть сколько угодно будет раз вызвано событие submit - так как форма не изменилась - то и вызван коллбэк в MutationObserver не будет. Но если при submit - на форму повесить атрибут id рандомный - то коллбэк будет вызван. Вообще бы не советовал пользоваться этой штукой, от неё мне кажется проблем больше, где-то не углядишь и она будет вызывать в те моменты когда ты их и не ожидаешь.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Я не понял, зачем вам MutationObserver. Этого кода должно хватать:
const form = document.querySelector('.webform-client-form-176');
form.addEventListener('submit', function (e) {
    console.log('test-test-test--234');
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы