Как динамически подгружать код html+js и заставить его работать?

Question

[Bodrosh]

Здравствуйте, возникла следующая проблема: Есть несколько страниц, в которых содержатся динамические элементы, напр., галерея и слайдер (состоят из html и js). При подгрузки контента данных страниц на отдельную страницу через ajax (использую библиотеку axios, события подгрузки по нажатию на кнопки, кликаю на одну кнопку - подгружается 1-я страница, на 2-ю - другая) полученная страница практически корректно отображается (html и css код страницы), получаю и вывожу примерно так:

$pageBlock = document.getElementById('content');
 axios.get(this.elementUrl {
                        responseType: 'json'
                    }).then((response) => {
                            this.pageBlockContent = response.data;

$pageBlock.innerHTML = this.pageBlockContent;

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

Есть ли способ корректно отобразить все содержимое с динамикой? Нужно как-то перерисовать страницу, сказать браузеру что появился новые элементы, которым нужен js? Спасибо.

Comments

[FeST1VaL]

Вы используете jQuery? Просто почему то я думаю что там подгружается еще один какой нить jQuery и получается 2 jQuery на странице и они конфликтуют)

[Bodrosh]

Артем Будин, Нет, конфликтов нет, всё происходит без ошибок, не так всё просто) Проблема в том, что на первоначальной странице нет того js кода (и html элементов в DOM), который будет подгружен через Ajax, а браузер не знает, что нужно его выполнить, когда он загружается, наверно как-то так.

Answer 1

[Пашенька]

При подгрузки

Ну как так то?

На успешный коллбек подгрузки страницы нужно вызвать код, который заставит нерабочее работать. Элементы, которые требуют инициализации некоторых скриптов по-другому не заставишь работать. Если бы дело касалось событий, то можно было бы применить делегирование.

Comments

[Bodrosh]

При подгрузкЕ, опечатка, "На успешный коллбек подгрузки страницы нужно вызвать код, который заставит нерабочее работать." - это логично, но что это должен быть за код? ( Если предположить, что ajax запросом получен html код слайдера + его стили + библиотека самого слайдера и его инициализация. Нужно ж как-то браузеру сказать, чтобы он его выполнил. а не просто добавил на страницу)

[Пашенька]

Bodrosh, ну вот библиотека слайдера и его инициализация. Каким образом они «добавляются»? ИннерХТМЛом скрипт не выполнится. Нужно создавать элемент script устанавливать ему src и втыкать appendChild’ом в DOM.

[Bodrosh]

like-a-boss, спасибо за наводки, подумаю в этом направлении

Answer 2

[xmoonlight]

Для этих целей - я создал includeHTML (для SPA и прочих интерактивных веб-приложений).
Как раз позволяет загружать (и проверять: загружено ли уже) нужные HTML-блоки и JS-скрипты (+CSS и TXT).
Все описание - на гитхабе. Непонятно - спрашивайте: отвечу.

Comments

[Bodrosh]

Спасибо, ознакомлюсь