jQuery clear DOM previously loaded scripts

问题:

Good day people, I am working on a project where i load pages into divs using jQuery, and each page has its own jQuery scripts, my problem is that the previously loaded scripts are not clearing from DOM and that creates a bigger problem for my project.

For example, I have a set of timers in one page where it auto saves data but when I change the page the timers are still running and messing up the contents.

I manage changing pages like this:

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

As you can see I have two divs, one is called office table that handles the childpage and childpage has the contents for changed pages. however as you can see I have used the remove(); function as well and after that I placed the childpage to officetable and posted the contents of the file, but still it doesn't remove my previously loaded scripts.

Thank you guys.

回答1:

Once you append your scripts to the page, those are run. Although you remove the scripts tags from the DOM, the variables will remain. By that I mean timers, functions, any kind of variable declared in your code.

So you might want to clear the previous state which is not desired anymore.

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

回答2:

If your scripts have already executed removing the DOM elements are not going to get rid of them. Go to any page with JavaScript, open up firebug or console and type $("script").remove(). Everything keeps running.

Here are some tips:

1. Don't re-include your script with every ajax call.
2. If you have events that need handling use jQuery.live()
3. Only set any timers once, not on every ajax call.

It sounds like you're building a single page web-app, you may want to look at using something like backbone.js to organize your code and help you follow some better patterns. check out this tutorial:

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

Best of luck

回答3:

Perhaps if you removed the progress bar span? Also, you might consider using $.deferred -> .done