使用.off（）或.empty（）删除jquery事件处理程序

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

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)

诸如此类。我所做的任何事情实际上都不会删除事件处理程序。我所能做的就是附加/添加它们。我永远无法清除它们。我做错了什么

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); });
    }
}

---

如果在（）上使用

，

，则不必每次都重新附加。@Xander-init的调用仅仅是因为我通过ajax获取数据并将其加载到小部件所附加到的元素中。它被调用以刷新该数据。我曾考虑过以某种方式破解它，但还没有完全考虑过。是的，破解并使用一个单一的插件要好得多。你最好以一种防止插件再次初始化的方式编写插件。如果插件是在已经初始化的元素上调用的，不要再绑定事件，只需执行任何需要进行的“重新初始化”。@Huangism-使用单个on的确切含义是什么？我举了一个非常简单的例子。我有多个这样的小部件，它们有许多附加到许多不同元素的事件处理程序。我怎样才能只拥有一个.on（）？如果不尝试这个，它看起来非常接近于工作正常。唯一的问题是“this.el.html（data）”行在if not initialized检查中，这将使重载函数简单地执行ajax调用，但对结果不做任何处理。而且第二个版本更好。啊-第一次错过了其他版本。