从DOM中删除时，动态添加的JavaScript脚本将继续执行

因此，我正在创建一个SPA，并使用AJAX将HTML页面加载到我的站点的索引页面中。问题是，当包含我的一个页面时，它似乎会挂起并执行其中的JavaScript代码，即使它随后从DOM中删除

index.html（正文）

例子 GIF应该解释我的意思：

当我单击tutorial按钮时，它会加载上面发布的文件的内容并将其放置在

#ui_容器中

，所有内容都正常工作

问题是，当我返回主菜单时，由于某种原因，它仍然会再次显示该弹出窗口，即使DOM内容已被删除

然后我检查了网络选项卡，发现tutorial.html（以及其中的脚本）甚至在返回菜单时也被再次调用。下图概述了所提到的内容：

为什么会这样

更新#1

$(document).on('click', '.clickable', function () {  
    if (self.hasClass('back_to_home') || self.hasClass('ui_go_back_to_home'))
        return to('home');

}

更新#2

$(document).on('click', '.ui_operator_choice', function () {

});

$(document).on('click', '#ui_restart', function () {

});

---

这些脚本是否创建了事件处理程序，如果是的话，它们是否被销毁了？@FrankModica它们创建了两个单击处理程序，不，怎么做？显然，注入代码中的两个脚本中的一个或两个都设置了对DOM对象的引用（例如，通过将它们声明为全局对象），因此，当您从DOM中删除它们时，实际上并不是删除它们，而是从DOM中删除它们（它们仍然存在，因为对它们的引用仍然存在，所以垃圾收集器无法销毁它们）。您可以使用

$.off

删除事件处理程序。但请确保在删除

DOM

之前删除它们。还考虑将事件附加到元素而不是DOM，使它们更容易在没有元素的情况下移除或不执行。由于我不知道这些文件的内容，我建议您在这些文件中使用

单例

或单变量模式，以便您可以将该变量设置为

null

，以从窗口或DOM中删除它们以及它们的效果。您的单击处理程序位于

文档

上，因此它们将保持不变。您应该在适当的时间使用

off

（与您在此处使用的

on

相反）销毁它们

function to (page_name, callback) {
    $.ajax({
        url: page_name + '.html',
        type: 'GET',
        cache: false,
        async: true,

        beforeSend: function () {

        },

        success: function (page) {
            $('#ui_container').html(page);

            return is_function(callback) ? callback(page) : true;
        },

        error: function (jqXHR, text_status, error_thrown) {
            console.log(text_status);
        }
    });
}

$(document).on('click', '.clickable', function () {  
    if (self.hasClass('back_to_home') || self.hasClass('ui_go_back_to_home'))
        return to('home');

}

$(document).on('click', '.ui_operator_choice', function () {

});

$(document).on('click', '#ui_restart', function () {

});