Как подключать скрипты для страницы, которая грузится через ajax?

Question

[Сергей Игнатьев]

Дорабатываю дизайн сайта, в котором внутренние ссылки открываются через ajax . Я добавил на сайт новые Jquery скрипты, которые нe работают при переходе по внутренней ссылке, хотя на данной странице присутствуют. Если эту страницу обновить, перезагрузить, то скрипты стабильно работают.
Подскажите пожалуйста логику, чтобы я понял, как подгружать скрипты, если страницы грузятся через ajax.

Answer 1

[Андрей Гончаров]

У тебя скрипты наверняка вызываются по document.ready событию. Это событие не происходит когда появляется новый контент на страницу после ajax запроса.
Поэтому по колбэку аякса вызывай заново нужные тебе скрипты. Или напиши функцию типа initScipts() - в ней инициализируй нужные тебе скрипты. И вызывай эту функцию и по document.ready и по колбэку аякса.

Answer 2

[leni_m]

такая запись не сработает, если элемент с id="el" пришел ajax'ом, т.к. при начальной загрузке такого элемента нету.

$("$el").on('click', function(){
   ...
})

а вот такая сработает

$("body").on('click', '#el', function(){
   ...
})

Comments

[Сергей Игнатьев]

Спасибо большое, здорово выручили!

[Сергей Игнатьев]

C jQuery получается! Спасибо большое!
Может быть подскажете, как эту же проблему при js исправить?

[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
el.addEventListener('click', onClick, false);
});

function onClick(e){
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}