javascript - 为什么动态删除脚本后该函数仍在运行？

Question

我正在尝试加载一个新的脚本标签，该标签动态地用新的内容替换 jQuery 内容(在 #clickmeDIV DIV 内)，但是，一旦第二个脚本标签加载到 >#clickmeDIV DIV，替换的第一个脚本仍在运行，即使它不是 DOM 的一部分。我通过使用 chrome 开发者工具检查 DOM 来确认这一点。有没有办法完全删除第一个脚本，然后动态地将其替换为新脚本(无需重新加载页面)？

div {
  width: 300px;
  height: 300px;
  background-color: blue;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="clickmeDIV">

  <script>
    $(document).on('click', '#clickmeDIV', function() {

      alert('Alert executed by the original script');
      $('#clickmeDIV').empty();

      $('#clickmeDIV').html('<script type="text/javascript">' +
        '$(document).on("click","#clickmeDIV", function(){' +
        'var foo  = function(){alert("Alert executed by the script inserted dynamically"); }; foo();' +
        '}); </s' + 'cript>');

    });
  </script>

</div>

Answer 1

您将一个点击事件处理程序附加到 ID 为 clickmeDIV 的 div。您可以使用

删除它

$(document).off('click', '#clickmeDIV');

或者

$('#clickmeDIV').off('click');

了解更多信息here