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

Question

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

index.html（正文）

<div id="ui_container">
    <div id="ui_top_left_section" style="display: none">
        <div id="ui_heart_icon_1" class="fa fa-heart"></div>
        <div id="ui_heart_icon_2" class="fa fa-heart"></div>
        <div id="ui_heart_icon_3" class="fa fa-heart"></div>
    </div>

    <div align="center" id="ui_operator_choice_section" style="display: none">
        <div id="plus" class="ui_operator_choice">+</div>
        <div id="minus" class="ui_operator_choice">−</div>
        <div id="multiply" class="ui_operator_choice">×</div>
        <div id="divide" class="ui_operator_choice">÷</div>
        <div id="equal" class="ui_operator_choice">=</div>
        <div id="join" class="ui_operator_choice fa fa-long-arrow-left"></div>
    </div>

    <div id="ui_top_right_section" style="display: none">
        <div id="ui_restart" class="fa fa-refresh"></div>
        &nbsp; &nbsp;
        <div class="ui_go_back_to_home clickable fa fa-bars"></div>
    </div>

    <div align="center" class="ui_equation_container" style="display: none">
        <div class="ui_number_box"></div>
        <div class="ui_empty_operator_box"></div>
        <div class="ui_number_box"></div>
        <div class="ui_empty_operator_box"></div>
        <div class="ui_number_box"></div>
        <div class="ui_empty_operator_box"></div>
        <div class="ui_number_box"></div>
        <div class="ui_empty_operator_box"></div>
        <div class="ui_number_box"></div>
        <div class="ui_empty_operator_box"></div>
        <div class="ui_number_box"></div>
        <div class="ui_empty_operator_box"></div>
        <div class="ui_number_box"></div>
    </div>
</div>

<script src="assets/js/app/game_new.js"></script>
<script src="assets/js/app/tutorial.js"></script>

tutorial.html

#ui_container

即使来自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); } }); } 的内容被清空并替换为新内容，从 tutorial.html 动态加载的两个脚本似乎仍然可以执行。以下是我加载HTML页面的方法：

#ui_container

实施例

This GIF应该解释我的意思：

当我点击教程按钮时，它会加载上面发布的文件的内容并将其放置$(document).on('click', '.clickable', function () { if (self.hasClass('back_to_home') || self.hasClass('ui_go_back_to_home')) return to('home'); } ，一切正常。

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

然后我检查了网络标签，发现即使回到菜单，也会再次调用 tutorial.html （及其中的脚本）。下图概述了所提到的内容：

为什么会这样？

更新＃1

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

});

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

});

更新＃2

=A2&"|"&B2&"|"&C2