После удаление динамического элемента HTML блокируется взаимодействие со всей страницой

Question

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

userIcon.addEventListener('click', () => {
    burgerAnimate();
    document.body.innerHTML += authPanel;
    document.querySelector('.btn-close').addEventListener('click', () => {
        var element = document.querySelector('.auth-panel');
        element.parentNode.removeChild(element);
    });
    authWithGoogle();
});

Элемент с классом '.btn-close' является дочерним от authPanel

Answer 1

document.body.innerHTML += authPanel;

Эквивалентно по смыслу следующему коду:

let html = document.body.innerHTML;
html = html + authPanel;
document.body.innerHTML = ''; // Здесь все связанные с элементами события теряются
document.body.innerHTML = html; // Здесь добавляется новая разметка, которая преобразуется в DOM, CSS новое дерево благополучно принимает, а JS - нет!

То есть, body полностью меняет всё содержимое, а потому работает только событие, которое определяется после такой замены:

document.querySelector('.btn-close').addEventListener('click', () => {});

Вывод: лучше используйте body.append() или body.insertAdjacentHTML()

БЛОГ НА HUSL

После удаление динамического элемента HTML блокируется взаимодействие со всей страницой

Ответы (1 шт):