@lagudal

Как запустить скрипт после того, как страница будет полностью загружена, не только DOM, но и компоненты, подгружаемые динамически?

Есть скрипт, который обрабатывает событие по клику на элемент какого-то блока страницы. Для примера, пусть блок это карточка товара, а элемент, клик по которому обрабатывается, какой -то линк с информацией. Скрипт по клику подгружает сторонний элемент с нужной информацией в модальном окне.
В обычной ситуации нет ничего сложного - карточки товара и соотв-но нужные элементы- линки- подгружаются раньше скрипта, все работает нормально.
Но вот есть еще нестандартная ситуация: карточки товаров, которые определяются как последние просмотренные, подгружаются динамически, как js компоненты, другим скриптом, и подгружаются они уже после полной загрузки DOM, и естественно что нужный скрипт, который выполняет обработку кликов, уже тоже подгрузился, и не работает с кликами по линкам на этих динамических карточках.
Все варианты, которые рекомендуют для того, чтобы скрипт был запущен гарантированно после полной загрузки страницы (например, способы, указанные здесь) не работают, так как, если я правильно понимаю, эти динамические подгружаемые компоненты не являются элементами DOM.
Единственное, что срабатывает, это таймаут, причем, в моем случае, гарантированно срабатывает от 3 секунд.
Но тут встает дилемма: я не хочу дублировать код и потому хочу использовать один скрипт на все случаи. В этом варианте, если я ставлю таймаут 3 секунды, на обычных страницах, где карточки являются частью DOM, задержка в 3 секунды является чрезмерной.
Вопрос - можно как то сделать, чтобы использовать один этот скрипт так, чтобы когда карточки - часть DOM, он бы срабатывал без задержки, а когда они динамические, то он тоже корректно выполнялся?
  • Вопрос задан
  • 173 просмотра
Пригласить эксперта
Ответы на вопрос 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Всё решается гораздо проще. Используйте всплытие событий.
Вместо навешивания обработчика на каждый нужный элемент вешайте его на body и проверяйте источник события. Если источник - линк, то выполняйте необходимые действия.
https://learn.javascript.ru/bubbling-and-capturing
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы