Есть ли прослушиватель событий для использования после завершения appenchild? - PullRequest
Новая
       38

Есть ли прослушиватель событий для использования после завершения appenchild?

0 голосов
/ 10 июня 2019

На странице уже загружен пустой всплывающий элемент div.Когда пользователь нажимает на изображение, div создается и отправляется во всплывающее окно.Я ищу событие для прослушивания конца appendChild: 

let galerieImages = document.getElementsByClassName("field-galerie-image");
let galeriePopup = document.getElementById("galerie-popup");
for(let i = 0; i < galerieImages.length; i++) {
    galerieImages[i].addEventListener("click", function(e) {
        e.preventDefault();
        popup = document.createElement("div");
        popup.innerHTML = galerieImages[i].nextElementSibling.innerHTML;
        galeriePopup.appendChild(popup);
       popup.addEventListener("load", function(e) {
          console.log("popup loaded");
    })
};

В этом коде загрузка событий, похоже, не работает с appendchild.Какое событие можно использовать после аппендикса?
PS: все работает нормально, пока функция popup.addEventListener

РЕДАКТИРОВАТЬ:
Функция MutationObserver, безусловно, является лучшим вариантом, но я выбрал альтернативу setTimeout, чтобы мой код был короче и проще для небольшихфункция нужна.
Скоро я изучу MutationObserver для дальнейшего развития.

1 Ответ

1 голос
/ 10 июня 2019

Событие «load» вызывается только один раз на загруженной странице.
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Возможно, вам нужно вызвать функцию просто после того, как отобразится всплывающее окно.
В этом случае попробуйте использовать window.setTimeout (). 

function onPopupLoaded() {
    console.log("popup loaded");
}

let galerieImages = document.getElementsByClassName("field-galerie-image");
let galeriePopup = document.getElementById("galerie-popup");
for(let i = 0; i < galerieImages.length; i++) {
    galerieImages[i].addEventListener("click", function(e) {
        e.preventDefault();
        popup = document.createElement("div");
        popup.innerHTML = galerieImages[i].nextElementSibling.innerHTML;
        galeriePopup.appendChild(popup);
        setTimeout(onPopupLoaded, 0);
    })
};

Время завершения appendChild указывается после возврата в цикл обработки событий.
т.е. после завершения функции прослушивания события щелчка.
При вызове setTimeout () с задержкой 0 функция обратного вызова onPopupLoaded () будет выполнена как можно скорее после процесса рисования.
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

...