jQuery 清除 DOM 之前加载的脚本

Question

大家好，我正在做一个项目，我使用 jQuery 将页面加载到 div 中，每个页面都有自己的 jQuery 脚本，我的问题是之前加载的脚本没有从 DOM 中清除，这会产生更大的问题我的项目。

例如，我在一个页面中有一组计时器，它会自动保存数据，但是当我更改页面时，计时器仍在运行并弄乱了内容。

我像这样管理不断变化的页面：

$(document).ready(function() {

   $('li').click(function (event) {

      $('.progressbarone').hide();
      var theitem = this.id;
      //isf ajax to load with addon
      var thefile = "isf_ajax.php?addon="+this.id;
      var progress = '<span class="progressbarone"><img src="'
         + THEMEURL
         + '/gfx/images/progessbar1.gif" width="20" height="16" /></span>';

      // pre actions
      $('.'+ theitem +'_item')
         .append(progress)
         .children(':last')
         .hide()
         .fadeIn(1000);
      $('li').removeClass('active');
      $(this).addClass('active');

      // load the page
      $('#childpage').remove();
      $('#officetable').html('<div id="childpage">loading</div>');
      $('#childpage').load(thefile, function() {

         // after load actions
         $('.progressbarone').fadeOut(2000);
      });
   });
});

如您所见，我有两个 div，一个称为 office table，用于处理子页面，而子页面包含更改页面的内容。但是如您所见，我使用了 remove();功能也一样，之后我将子页面放置到 officetable 并发布了文件的内容，但它仍然没有删除我之前加载的脚本。

谢谢你们。

Answer 1

将脚本附加到页面后，它们就会运行。尽管您从 DOM 中删除了脚本标签，但变量仍将保留。我的意思是计时器、函数、代码中声明的任何类型的变量。

因此，您可能希望清除不再需要的先前状态。

function doTheCleanup(){
    clearTimeout(globalTimerVariable);
    delete someGloablVar;
    //and so on
}

Answer 2

如果您的脚本已经执行了删除 DOM 元素，则不会删除它们。使用 JavaScript 转到任何页面，打开 firebug 或控制台并输入 $("script").remove()。一切都在运行。

这里有一些提示：

1. 不要在每次 ajax 调用中重新包含脚本。
2. 如果你 有需要处理的事件使用 jQuery.live()
3. 只设置任何 计时器一次，而不是每次 ajax 调用。

听起来你正在构建一个单页网络应用程序，你可能想看看使用类似backbone.js 的东西来组织你的代码并帮助你遵循一些更好的模式。查看本教程：

http://addyosmani.com/blog/building-spas-jquerys-best-friends/

祝你好运

Answer 3

也许如果您删除了进度条跨度？另外，您可以考虑使用 $.deferred -> .done