Question

当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也要运行脚本

如何使监听器在内容更新时触发两个脚本？

0 个答案: