javascript – 如何处理jQuery UI小部件中的事件

我正在尝试按照 here给出的模型编写一个jQuery小部件.
这是小部件的快照:

(function ($) {
    $.widget("ui.notification", {
        _create: function () {
            if (!this.element.hasClass("ntfn")) {
                this.element.addClass("ntfn");
            }

            this.elTitle = this.element.append("<div class='ntfn-title'>Notifications</div>");

            this.elTitle.click(this._titleClick)
        },
        _titleClick: function () {
            console.log(this);
        }
    });
})(jQuery);

这里的问题是_titleClick方法中“this”的范围,在方法内部指向title元素.但我需要它指向widget元素.

我认为这样做的一种方法是使用类似的包装类

var that = this;
this.elTitle.click(function() {
    that._titleClick.apply(that, arguments);
});

这是解决此问题的最佳方法,还是有任何解决此问题的一般模式?

使用 this._on() method绑定处理程序.此方法由jQuery UI小部件工厂提供,并将确保在处理程序函数中,它始终引用小部件实例.

_create: function () {
    ...
    this._on(this.elTitle, {
        click: "_titleClick" // Note: function name must be passed as a string!
    });
},
_titleClick: function (event) {
    console.log(this);       // 'this' is now the widget instance.
},
相关文章
相关标签/搜索