Почему код, запускаемый по загрузке DOM из динамического источника выдает ошибку, но работает, а из статического работает без ошибок?

Question

[oink]

Добрый день. Есть такой код, с помощью которого находятся все спрятанные блоки-галереи и активируются чекбоксы-"выключатели", ответственные за то, свернута галерея или развернута. DOM строится динамически из PHP (Битрикс, если это важно).

document.addEventListener('DOMContentLoaded', function() {
    var galleries = document.querySelectorAll('.photogallery');
    if (galleries) {
        [].forEach.call(galleries, function (gallery) {
            var toggle = gallery.querySelector('.photogallery-year-toggle');
            var hiddenWrapper = gallery.querySelector('.photogallery-image-wrapper-hidden');

            toggle.addEventListener('click', function (e) {
                e.preventDefault();
                hiddenWrapper.classList.toggle('photogallery-image-wrapper-hidden');
                toggle.classList.toggle('photogallery-year-toggle-open');
            });
        });
    };
});

Этот код отлично отрабатывает, но в консоли сразу по загрузке всегда появляется ошибка: TypeError: toggle is null. Т.е. браузер вроде бы думает, что элемент в переменной toggle не загрузился и отсутствует. Аналогичный код (классы только другие, понятное дело) на статическом сайте работает без ошибок. Это может быть как-то связано с генерацией HTML из PHP, несмотря на проверку 'DOMContentLoaded'? Как это пофиксить?

Answer 1

[Rsa97]

Такое поведение может быть связано с тем, что часть контента, в том числе и необходимая для работы этого скрипта, генерируется динамически после загрузки основного документа.
Самый надёжный способ для таких ситуаций - вешать обработчик на родительский элемент, гарантированно присутствующий на момент DOMContentLoaded и использовать всплытие событий.
Второй вариант - искать, в каком месте реально создаётся и добавляется в DOM нужный элемент и вешать обработчик в это месте кода.

Comments

[oink]

Хорошо, а как и для первого, и для второго случая искать это место, куда можно его повесить? Перенос на один из близких родительских элементов, к примеру, дает то, что теперь и он null.

[Rsa97]

oink, Изучать код, смотреть, что и в какой последовательности монтируется в DOM. Как минимум, document.querySelectorAll('.photogallery') выдаёт непустой список, значит можно повесить обработчик на эти элементы.
В крайнем случае на body, всплытие и до него дойдёт.

[oink]

Как-то так? Этот вариант не работает, к сожалению.

document.addEventListener('DOMContentLoaded', function() {
    var galleries = document.querySelectorAll('.photogallery');
    if (galleries) {
        [].forEach.call(galleries, function (gallery) {
            gallery.addEventListener('load', function () {

                var toggle = gallery.querySelector('.photogallery-year-toggle');
                var hiddenWrapper = gallery.querySelector('.photogallery-image-wrapper-hidden');

                toggle.addEventListener('click', function (e) {
                    e.preventDefault();
                    hiddenWrapper.classList.toggle('photogallery-image-wrapper-hidden');
                    toggle.classList.toggle('photogallery-year-toggle-open');
                });
            });
        });
    };
});

[Rsa97]

oink, Значит у галерей нет события load.

...
gallery.addEventListener('click', function (e) {
  if (e.target.matches('.photogallery-year-toggle')) {
    e.preventDefault();
    gallery.querySelector('.photogallery-image-wrapper-hidden')
      .classList.toggle('photogallery-image-wrapper-hidden');
    e.target.classList.toggle('photogallery-year-toggle-open');
  }
}
...

[oink]

Rsa97, огромное спасибо, теперь все функционирует как часы! Только заменил

gallery.querySelector('.photogallery-image-wrapper-hidden').classList.toggle('photogallery-image-wrapper-hidden');

на

gallery.querySelector('.photogallery-image-wrapper').classList.toggle('photogallery-image-wrapper-hidden');

иначе класс удаляется, а обратно не ставится, т.к. после первого удаления скрипт перестает понимать, какому элементу нужно вернуть этот класс.

Answer 2

[profesor08]

Весь js должен подключаться после загрузки html, значит подключай свой тег скрипта в самом конце документа. Тогда гарантированно все загруженные элементы будут готовы к работе. Повторю, вставляй не в теге head, а переде закрывающим тегом </body>.

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

Comments

[oink]

Да, забыл уточнить, скрипт подключается буквально в нескольких строчках от </body>

[profesor08]

oink, тогда демонстрируй проблему на jsqfidle или codepen

[oink]

profesor08, не думаю, что получится. Надо весь проект показывать, т.к., как было сказано, весь сайт генерируется из .php

[profesor08]

oink, ну так скопируй разметку. Без демонстрации проблемы, придется самому с ней играться.

[oink]

profesor08, не совсем понимаю все равно. Мне вообще всю страницу скопировать? Тогда от одного HTML без стилей и скриптов codepen виснет. Если нет, то в общем это выглядит как

<html>
  <body>
    <div class="inner"></div>
    <script src="/js/myscript.js"></script>
  </body>
</html>

Не думаю, что это что-то даст.