title: How to handle events in jQuery UI widgets
body: <p>I'm trying to write a jQuery widget following the model given <a href="http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/" rel="noreferrer">here</a>.
  Here is a snapshot of the widget:</p>
  
  <pre><code>(function ($) {
      $.widget("ui.notification", {
          _create: function () {
              if (!this.element.hasClass("ntfn")) {
                  this.element.addClass("ntfn");
              }
  
              this.elTitle = this.element.append("&lt;div class='ntfn-title'&gt;Notifications&lt;/div&gt;");
  
              this.elTitle.click(this._titleClick)
          },
          _titleClick: function () {
              console.log(this);
          }
      });
  })(jQuery);
  </code></pre>
  
  <p>Here the problem is with the scope of "this" inside the <code>_titleClick</code> method, inside the method this points to the <code>title</code> element. But I need it to point to the <code>widget</code> element.</p>
  
  <p>I think one way of doing it will be to use a wrapper class like</p>
  
  <pre><code>var that = this;
  this.elTitle.click(function() {
      that._titleClick.apply(that, arguments);
  });
  </code></pre>
  
  <p>Is this the best way to solve this problem or is there any general pattern to solve this issue?</p>