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

所以我正在创建一个SPA，我正在使用AJAX将HTML页面加载到我网站的索引页面中。 问题在于，当我的一个页面被包含在内时，它似乎会在其中执行JavaScript代码，即使它随后从DOM中删除。

index.html（正文）

tutorial.html

 
 
 
 
 
 
 
 
+
 
−
 
×
 
÷
 
=
 
 
 
 
     
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   

即使来自#ui_container内容被清空并替换为新内容，从tutorial.html动态加载的两个脚本似乎仍然可以执行。 以下是我加载HTML页面的方法：

 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); } }); } 

例

这个 GIF应该解释我的意思：

当我单击教程按钮时，它会加载上面发布的文件的内容并将其#ui_container ，一切正常。

问题是，当我返回主菜单时，即使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 () { });