У меня проблема, когда AJAX обновляет контент, тогда я теряю сценарии, которые привязаны к узлам DOM.AJAX выполняет предварительную выборку этих файлов из других файлов HTML / PHP.Это скрипты Swiper и Isotope, которые я применяю с помощью setTimeout при первом запуске.Каждое обновление этого конкретного поддерева узла будет нарушать сценарии.swiper-container и gallery находятся внутри другого HTML-файла.Например,
- это первый загруженный контент.Даже нажатие на разрыв нарушает работу этих сценариев.
Я пытался прочитать запросы AJAX и затем вызвать эти функции, но мне не повезло.Попытка присоединить setInterval к этим функциям - работает, но скрипты постоянно обновляются, так что это действительно глючный и вялый опыт.Метод DOMSubtreeModified работал, но браузер полностью зависал.mutationObserver Я попробовал это, но не получил его на работу.
<body>
<main id=main-empty> // This is getting updated with content
</main>
</body>
// Эта часть обновляет основной элемент (с этим проблем не возникает), каждый элемент работает без сбоев
class PageDefault extends Page {
private _module: HTMLElement | null;
private _template: string | undefined;
private _url: string;
constructor(url: string) {
super();
this._url = url;
this._cachedDOM();
}
protected _cachedDOM = async() => {
this._module = document.querySelector(`main`);
this._template = await Helper.getHTML(this._url);
if (this._module && this._template) {
this._module.outerHTML = this._template;
this._module = document.querySelector(`main`);
}
}
}
// Загружаемые скрипты
setTimeout(function() {
mySwiper(); // Needs this var swiper = new Swiper('.swiper-container')
runIso(); // Needs this $('.gallery').isotope
}, 5000)
Ожидаемый результат - запуск сценария даже при обновлении этого DOM