scope - How to get the this of a object in a handler for a click event in jquery?

Question

// begin signals
this.loginSignal

this.init = function(){
  // init signals
  this.loginSignal = new t.store.helpers.Signal;

  // map events
  $('[value]="login"', this.node).click(this.login)
}

this.login = function(){
  // this will dispatch an event that will be catched by the controller
  // but this is not refering to this class
  // and the next line fails :s
  this.loginSignal.dispatch();
}

to make it work now i must add

var $this = this;

this line and use $this instead of this :S

any clearer way around? thanks

Answer 1

When the click handler is called, the this keyword is remapped to the element that triggered the event. To get to the original object, you want to put the function code in a closure, and make a reference to the object outside the closure, where you still have the correct reference to this.

  // map events
  var thisObject = this;
  $('[value]="login"', this.node).click(function () {
     thisObject.loginSignal.dispatch();
  });