处理分离的dom元素，gridster.js插件

Question

我正在使用gridster.js插件，这很好，但是当我使用它的删除方法删除项目时，它似乎给了我问题。我正在使用它的内置方法remove_all_widgets来清除我目前在页面上的内容并加载新内容。

你可以在这里看到。

 fn.remove_all_widgets = function(callback) {
    this.$widgets.each($.proxy(function(i, el){
          this.remove_widget(el, true, callback);
    }, this));
    return this;
};

它循环遍历小部件并调用remove_widget，如下所示:

/**
* 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;
};

我有一小段javascript来运行按钮函数和其他各种各样的东西。我在使用它后不久就意识到，它将小部件的完整html内容留在一个分离的dom树中，从而保持js文件的运行。我首先发现这是因为按钮在新页面上具有相同的名称，并且它正在为新加载的按钮和我使用gridsters remove_all_widgets方法从屏幕上取下的按钮运行单击函数。

我可以跟踪以前的javascript到一个(匿名函数)在chomes开发控制台，并在其中，我可以看到分离树内的整个html内容。我没有刷新页面或任何东西，新的内容是由ajax带来的(我设置ajax缓存:false)。

有别的办法吗?有没有可能在小部件卡住之前清除它们的内容?如果根本不发生这种情况，或者有某种方法在它们被移除时完全摆脱它们，那将是理想的。

感谢您花时间阅读这篇文章，任何见解都会很有帮助。

按要求，她是一些代码，点击功能上的行按钮为例是双重发射:

    $(document).ready(function() {
    $(document).on("change",".accountContries",function(e){
    var countryPck =  $("body > .addAccountForm1").find(".accountContries").find('option:selected').attr('id');
 $.ajax(    
        {
         cache: false,
         url : "/listStates/" + countryPck,
         type : "GET",
         beforeSend: function(){
             $("body").append("<div class='loadingNow'></div>");
          }, 
          success:function(data, textStatus, jqXHR) {
            $('.loadingNow').remove();     
            $(".accountStates").empty();
            $(".accountStates").append("<option value='' selected disabled> Select a State</option>");
            $.each(data.states, function(){
                $(".accountStates").append("<option value=" + this.id  +" id=" + this.id + ">" + this.name +"</option>");
            });
        },
        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");
    }
});
});
  </script>

更新:似乎只有<Script>标签内的东西被保留，即使元素被删除

Answer 1

根据您的评论和更新，您在加载的内容页面中有Javascript。由于这包括委托事件处理程序的使用，因此该代码将继续存在。

这是一种情况，您最好使用普通的非委托事件处理程序，如:

$(".lines-button").bind("touchend click", function(e){
    e.stopImmediatePropagation();

这些绑定将在元素被移除时终止(因为它们是每个元素处理程序)。

另一种方法是在内容页中不包含任何代码，只在母版页中包含，并在加载新内容时根据需要应用代码