How to handle events in jQuery UI widgets

javascript, jquery, jquery-ui

Solution

I wrote a method my own to solve this issue

_wrapCallback : function(callback) {
    var scope = this;
    return function(eventObject) {
        callback.call(scope, this, eventObject);
    };
}

Problem

I'm trying to write a jQuery widget following the model given here. Here is a snapshot of the widget: ``` (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); ``` Here the problem is with the scope of "this" inside the `_titleClick` method, inside the method this points to the `title` element. But I need it to point to the `widget` element. I think one way of doing it will be to use a wrapper class like ``` var that = this; this.elTitle.click(function() { that._titleClick.apply(that, arguments); }); ``` Is this the best way to solve this problem or is there any general pattern to solve this issue?

Original source