title: Dealing with detached dom elements, gridster.js plugin
body: <p>I am working with the gridster.js plugin, which is great, however it seems to be giving me issues when I am removing items using it's remove method. I am using its built in method called remove_all_widgets to wipe out what I currently have on the page and load in new content.</p>
  
  <p>You can see it here.</p>
  
  <pre><code> fn.remove_all_widgets = function(callback) {
      this.$widgets.each($.proxy(function(i, el){
            this.remove_widget(el, true, callback);
      }, this));
  
      return this;
  };
  </code></pre>
  
  <p>It loops through the widgets and calls this remove_widget as seen here:</p>
  
  <pre><code>/**
  * Remove a widget from the grid.
  *
  * @method remove_widget
  * @param {HTMLElement} el The jQuery wrapped HTMLElement you want to remove.
  * @param {Boolean|Function} silent If true, widgets below the removed one
  * will not move up. If a Function is passed it will be used as callback.
  * @param {Function} callback Function executed when the widget is removed.
  * @return {Class} Returns the instance of the Gridster Class.
  */
  fn.remove_widget = function(el, silent, callback) {
      var $el = el instanceof $ ? el : $(el);
      var wgd = $el.coords().grid;
  
      // if silent is a function assume it's a callback
      if ($.isFunction(silent)) {
          callback = silent;
          silent = false;
      }
  
      this.cells_occupied_by_placeholder = {};
      this.$widgets = this.$widgets.not($el);
  
      var $nexts = this.widgets_below($el);
  
      this.remove_from_gridmap(wgd);
  
  
      $el.fadeOut($.proxy(function() {
  
          $el.remove();
  
          if (!silent) {
              $nexts.each($.proxy(function(i, widget) {
                  this.move_widget_up( $(widget), wgd.size_y );
              }, this));
          }
  
          this.set_dom_grid_height();
  
          if (callback) {
              callback.call(this, el);
          }
      }, this));
  
      return this;
  };
  </code></pre>
  
  <p>I have small bits of javascript to run button functions and other assorted things. I realized soon after playing with it that it leaves the full html content of the widget in a detached dom tree thus keeping the js files running. I first found this because the buttons have the same names on new pages and it was running the click functions for both the newly loaded button and the one i had taken off the screen using gridsters remove_all_widgets method.</p>
  
  <p>I can track the previous javascript to an (anonymous function) in chomes dev console, and within that i can see the entire html content inside of the detached tree. I am not refreshing the pages or anything, the new content is being brought in by ajax (I set ajax cache:false as well).</p>
  
  <p>Is there any way around this? Would it be possible to clear the contents of the widgets before they get stuck like this? It would be ideal if it didn't happen at all or of there was some way to get rid of them completely when they get removed. </p>
  
  <p>Thank you for taking the time to read this, any insight would be greatly helpful.</p>
  
  <p>As per requests her is some of the code, the click functions on the lines button for example is double firing: 
           </p>
  
  <pre><code>    $(document).ready(function() {
  
      $(document).on("change",".accountContries",function(e){
      var countryPck =  $("body &gt; .addAccountForm1").find(".accountContries").find('option:selected').attr('id');
  
   $.ajax(    
          {
           cache: false,
           url : "/listStates/" + countryPck,
           type : "GET",
           beforeSend: function(){
               $("body").append("&lt;div class='loadingNow'&gt;&lt;/div&gt;");
            }, 
            success:function(data, textStatus, jqXHR) {
              $('.loadingNow').remove();     
              $(".accountStates").empty();
              $(".accountStates").append("&lt;option value='' selected disabled&gt; Select a State&lt;/option&gt;");
              $.each(data.states, function(){
                  $(".accountStates").append("&lt;option value=" + this.id  +" id=" + this.id + "&gt;" + this.name +"&lt;/option&gt;");
  
              });
  
          },
          error: function(jqXHR, textStatus, errorThrown)
          {
              errorOffScreen("List States by account");
          }
      });
  });
   $(document).on("touchend click", ".lines-button", function(e){
      e.stopImmediatePropagation();
      if($(this).hasClass("close")){
          $(this).removeClass("close");
          $(".widget1x1Back").next(".actionsHolder3").slideUp("fast", function() {
              $(this).remove();
          });             
      }else{
  
          var iconsList = $(this).closest(".top1x1").next(".hdnActnLst").find(".iconsHolder3").html();
          $(this).closest(".widget1x1").append(iconsList);
          $(this).closest(".widget1x1").find(".actionsHolder3").hide();
              $(this).closest(".widget1x1").find(".actionsHolder3").slideDown(700,"easeOutBack");
          $(this).addClass("close");
      }
  });
  
  });
    &lt;/script&gt;
  </code></pre>
  
  <p>UPDATE : it seems I only the stuff inside the <code>&lt;Script&gt;</code> tag is being kept even after the elements are .removed</p>