Как повесить событие, чтобы оно сработало на динамически созданном объекте?

Question

[Shenku]

Доброго времени суток

Хочу повесить обработчик на все поля type=tel, но есть проблема, если открывается попап (подгружается из файла, его нет в разметке) и там присутствует это поле, то события никакого нет, знаю как это сделать в jquery

$( document ).on( 'click', 'p.target', function () {
    alert('Клик');
});

А как это сделать на нативном JS. Подскажите, буду благодарен.

p.s. подключаю imask таким способом

document.querySelectorAll( 'input[type=tel]' ).forEach( e => IMask( e, {
        mask: '+{7} ( 000 ) 000-00-00'
    }));

и работает это только с теми полями, которые загружаются при заходе на страницу

Comments

[Aetae]

Сергей delphinpro всё правильно сказал. Дополню, что для слежки за новыми элементами можно(но нежелательно) использовать MutationObserver. Однако более правильным решением является всё-таки встраивание в код, который собственно и добавляет новые элементы на страницу.

[Сергей delphinpro]

Aetae, А я еще добавлю, что использование MutationObserver оправданно в том случае, когда вы не имеете доступа к коду, открывающего попапы. Или попапы не имею событий. Наиболее часты случай – это расширения для браузеров. В остальных моментах я бы не стал его использовать. Тут и нагрузка на страницу, и геморрой с отловом узлов.

Answer 1

[Сергей delphinpro]

у вас неточность. в примере на jquery вы просто ловите событие
а в примере на ваниле хотите инициализировать плагин.

Это разные вещи.

Поймать событие просто. Вешайте обработчик на document и смотритте что прилетело в event.target

В случае с плагином, если он сам не поддерживает инициализацию на созданных в рантайме элементах, вам придется самостоятельно отслеживать появление новых узлов в DOM и по условиям инитить на них плагин. Но это в общем случае, для универсальности. В частном случае можно вклинится в процедуры открытия тех же попапов и там подключать маску. Например напрямую в клике кнопки "Открыть попап", или удобнее, в обработчике события "popup.opened" (условно, я не знаю, какие попапы у вас используются, но у большинства плагинов есть события открытия/закрытия).

Answer 2

[VoidVolker]

Очевидно, что надо сделать ровно то же самое и для нового добавленного элемента. Либо сразу после его загрузки либо после его присоединения к дереву. Т.е., создали/присоединили элемент к дереву - и сразу же подключить к нему imask.