0

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

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)

等等等等。我所做的一切实际上都不会删除事件处理程序。我所能做的就是追加/添加它们。我永远无法清除它们。我究竟做错了什么？

4

1 回答 1

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); });
    }
}
于 2013-03-28T20:20:26.197 回答