Question

我正在使用gridster.js插件，这很棒，但是当我使用remove方法删除项目时似乎给了我一些问题。我正在使用其内置的方法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方法从屏幕上取下的按钮运行单击功能。

我可以在chomes dev控制台中跟踪以前的javascript到（匿名函数），在其中我可以看到分离树内的整个html内容。我没有刷新页面或任何东西，新内容由ajax引入（我设置了ajax cache：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>标签内的内容被保留，即使在元素为.removed

之后

Answer 1

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

这是一个案例，如果您使用普通的非委派事件处理程序（例如：

）会更好

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

这些绑定将在删除元素时终止（因为它们是 per-element 处理程序）。

另一种方法是在内容页面中没有任何代码，但只能在母版页中使用，并在加载新内容时根据需要应用代码。

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

1 个答案: