Question

I’m trying to do this:

var foo = new Foo();
foo.setEvents( foo );

Code of foo:

function Foo()
{
   this.id = getId(); //this works successfully, each instance of foo gets
                          //assigned a new auto incrementing id e.g 1, 2, 3, etc

   this.setEvents = function( that ) 
   {
      $("#myButton").click( that.bar );
   }

   this.bar = function()
   {
      alert(this.id);
   }
}

Whenever I run this code and click on my button, I get an alert saying ‘undefined’

How can I preserve the state of the object whose method I want to run when the event is triggered?

Answer 1

this refers to something different in jQuerys scope…

function Foo()
{
   obj=this;
   this.id = 1; //this works successfully, each instance of foo gets
                          //assigned a new auto incrementing id e.g 1, 2, 3, etc

   this.setEvents = function( that ) 
   {
      $("#myButton").click( that.bar );
   }

   this.bar = function()
   {
      console.log(obj)
   }
}
var foo = new Foo();
foo.setEvents( foo );