Calling a function in jquery click event when using classes

Question

Hey.

Let's say I have this:

test = function() {

 this.init = function() {
  $("#someElement").html("Hey!").mousedown(function() {
   $(this).html("Clicked");

   /* 
    Now, if I wanted it to call function "dosomething" defined in the class, how would I do that? this.dosomething() obviously doesn't work.
   */

  });
 }

 this.dosomething = function() {
  alert("Did it!");
 }

}

var _go = new test();
_go.init();

Answer 1

Encapsulate the "dosomething" call into a javascript variable in your outer function, and reference it in your inner function.

this.init = function() {
var doSomething = this.doSomething;  
$("#someElement").html("Hey!").mousedown(function() {
   $(this).html("Clicked");

      doSomething();   

  });
 }

This creates a closure where the inner function still has a reference to the variables in the outer function.

Answer 2

You can set a context before losing the reference to your class:

test = function() {

  var context = this;

  init = function() {
    $("#someElement").html("Hey!").mousedown(function() {
      $(this).html("Clicked");
      context.dosomething();

    });
  }

  dosomething = function() {
    alert("Did it!");
  }

}

Answer 3

Declare test as being an new function() beforehand.

test = new function() {};

test.init = function() {
    test.foo();
};

I'm sure there are other / better ways to do this but I know that works.