使用.off()或.empty()删除jquery事件处理程序

Question

我在一个应用程序中有一些小部件，当创建/初始化时，将一系列事件处理程序附加到主容器元素。

widget = function(){
    this.el = $("#someelement");
    this.init = function(){
        doAjax(function(data)){
            this.el.html(data)
            .on("click", function(){
                //attach some handler here
            })
            .on("change", ("div.class"), function(){
                //attach some handler here
            });
        } 
    }
    this.reload = function(){
        this.init();
    }
}

我的问题在这里很明显-每当我重新加载小部件(调用init函数)时，我都会将处理程序重新附加到元素上。然后，如果我触发一个处理程序，它就会完成我"刷新"的次数。我试过很多方法:

this.el.empty().html(data)
this.el.off("*").html(data)
this.el.html(data)
.off("click change")
this.el.children.remove().end().html(data)

等等。我所做的一切实际上都没有删除事件处理程序。我所能做的就是把它们加起来。我永远无法清除它们。我做错了什么?

Answer 1

widget = function(){
    this.el = $("#someelement");
    this.isInitialLoad = false;
    this.init = function(){
        doAjax(function(data)){
            if(!isInitialLoad){
                this.el.html(data)
                .on("click", function(){
                    //attach some handler here
                })
                .on("change", ("div.class"), function(){
                    //attach some handler here
                });
            }
            else {
                this.el.html(data);
            }
        } 
    }
    this.reload = function(){
        this.init();
    }
}

或者，分离关注点:

widget = function(){
    this.el = $("#someelement");
    this.init = function(){
        doAjax(function(data) {
            this.el.html(data)
            .on("click", function(){
                //attach some handler here
            })
            .on("change", ("div.class"), function(){
                //attach some handler here
            });
        });
    }
    this.reload = function(){
        doAjax(function(data) { this.el.html(data); });
    }
}