DOM 中的动态 JS 脚本加载

Question

我一直在为我的网络课程 (Frl) 创建一个网站，我们被要求做一个类似银行的网站，所以我去做了。现在我有一个帐户页面，其中有多个需要动态加载的部分。我已经完成了大部分工作，并且工作正常。我也这么想！因为当我第一次加载该部分时，脚本也正确加载，但是当我删除该部分并再次加载它时，脚本

(console.log())

说脚本已再次加载，但随后没有任何反应。我试图将它们从 DOM 中删除并每次都重新加载，但它似乎没有做任何好事。

export class dynamicLoader {
    constructor(parentElement, template, scripts) {
        this.scriptElements = [];
        this.scripts = scripts;
        this.exportedHTML = template;
        this.template;
        this.parent = parentElement;
        this.appendElement();
    }

    //Template
    getTemplate() {
        let html = this.exportedHTML;
        return html;
    }

    //Handle script load : 
    loadScript(url) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = url;
            script.defer = true;
            script.type = 'module';
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    //Append element and load script
    appendElement() {
        this.template = document.createElement('section');
        this.template.innerHTML = this.getTemplate();
        this.parent.appendChild(this.template);

        // Loads scripts
        this.scripts.forEach((element) => {
            this.loadScript(element).then((scriptElement) => {
                console.log('Script: ' + element + ' has been loaded');
                this.scriptElements.push(scriptElement); // Store the script element reference
            }).catch((error) => {
                console.error(element + ' has not been loaded correctly', error);
            });
        });
    }

    // Remove element and unload scripts
    removeElement() {
        if (this.template) {
            // Remove script elements from the head element
            this.scripts.forEach((element) => {
                const scriptElement = document.querySelector(`script[src="${element}"]`);
                    if (scriptElement) {
                        scriptElement.remove();
                        console.log('Script: ' + element + ' has been removed');
                    }
                });
            // Remove the parent element
            this.parent.removeChild(this.template);
            this.template.innerHTML = '';
        }
    }
}

这里的代码应该在调用脚本时删除并重新加载脚本，但正如我所说，虽然它第一次有效，但第二次就不行了。

提前感谢您的回复！