加载/卸载包装在html页面中的html代码和脚本

Question

我的网页具有以下结构： 一个主要的html页面，其中包含导航栏和一个名为wrapperDiv的空div，我要在其中加载一些代码。我还加载了这样的脚本文件：

document.getElementById("sendMoneyBtn").onclick = function(){
    wrap("sendmoney.html","assets/js/sendmoney.js");
}

sendMoneyBtn是我的导航栏中的链接。因此，当我在导航栏上单击“ sendMoneyBtn”时，我会调用包装函数，该函数会加载“ sendmoney.js”，并将同样的文件sendmoney.html的内容加载到wrapperDiv中：

<div id="internalDiv">
    <form class="payForm">
        <div>
            <!--SOME CONTENT HERE-->
        </div>
    </form>
</div>

我的包装函数在这里定义：

function wrap(file,...scripts) {
    let url = "/" + file;
    $.get(url,function(data){
        document.getElementById("wrapperDiv").innerHTML = data;
    });
    for(i=0;i<scripts.length;i++){
        $.loadScript(scripts[i],function(){});
    }
} 

jQuery.loadScript = function (url, callback) {
    jQuery.ajax({
        url: url,
        dataType: 'script',
        success: callback,
        async: true
    });
}

因此，最后我将得到一个网页，在我的wrapperDiv上将有我想要的内容，并加载了所需的脚本。

问题是当我想单击导航栏上的另一个链接时，另一部分html代码将被加载到wrapperDiv中，但是旧脚本仍然存在。因此，当我回到旧页面时，我再次调用wrap函数并尝试再次加载脚本，从而导致错误。

所以我不知道更改网页结构是否更好，或者有解决方案，当我单击导航栏上的链接时，链接卸载旧脚本