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

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

    $(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>

你可以在这里看到

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

    return this;
};

    $(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>

它通过小部件循环并调用此remove_小部件，如下所示：

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

    $(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>

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

    $(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>

我可以在chomes开发控制台中跟踪前面的javascript到一个匿名函数，在这个匿名函数中，我可以看到分离树中的整个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>

这有什么办法吗？有可能在小部件像这样卡住之前清除它们的内容吗？如果它根本没有发生，或者当它们被移除时，有某种方法可以完全摆脱它们，那将是理想的

    $(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>

感谢您花时间阅读本文，任何见解都将非常有用

    $(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>

根据请求，她是一些代码，例如，lines按钮上的单击功能是双重触发：

    $(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>

---

更新：即使在元素被删除之后，我似乎也只保留了标记中的内容。根据您的评论和更新，您在加载的内容页中有Javascript。由于这包括委托事件处理程序的使用，该代码将继续存在

    $(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>

这是一种情况，如果您使用正常的非委托事件处理程序（如：

    $(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>

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

这些绑定将在删除元素时终止，因为它们是每个元素处理程序

    $(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>

---

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

如何连接按钮等的事件处理程序？如果使用委托处理程序，它将仅捕获文档中的事件。你能通过html内容底部的脚本标记来显示你的一小段javascript吗？这样它就可以与html内容本身单独拉入。例如，我添加了一些。谢谢显示的唯一事件已经是应用于文档元素的委托事件。根据定义，它不能应用于文档中不存在的断开连接的DOM元素。有更多的代码来帮助识别其他问题吗？看到什么最有帮助？我相信这是gridster处理删除的方式，旧的html内容仍然停留在某个地方并被激活。当我跟踪旧的javascript时，我可以将其视为一个名为VM96的匿名函数，数字会发生变化。如果我在控制台中打开它，它实际上就是我正在拉入的整个html内容，所以它就在某个地方，我不知道在哪里，也不知道为什么gridster保留它。抱歉，在这里编辑-我只能看到标签内的所有内容，而不是html内容

    $(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>