jQuery use an object's method as an event handler

Question

I have an object. It initializes a button to alert "Hello!" when it is clicked. Why won't this work?

jsfiddle: http://jsfiddle.net/kUT52/1/

HTML

<button>Test</button>

JS

var MyObject = {
  testValue: "Hello!",

  testFunction: function() {
    alert(this.testValue);
  },

  init: function(button) {
    button.click(this.testFunction());
  }
}

$(document).ready(function(){
  var buttonInstance = new MyObject();
  var button = $('button');
  buttonInstance.init(button);
});

Answer 1

Whenever you put () behind a function reference, you are executing the function. You have to pass the function reference to .click, not what the function returns (unless the function returns a function that you want to use as event handler).

Example:

button.click(this.testFunction);

But now you have another problem: Inside the function, this will refer to the DOM element and not to the object, so accessing this.testValue will return undefined.

You can use jQuery's $.proxy function to fix this:

button.click($.proxy(this.testFunction, this));

Now this will refer to the object, and you can get a reference to the clicked element via event.target.