Getting correct "this" in jQuery button callback

Question

I have a class:

function RustEditor() {

this.init = function() {

 var saveButton = this.container.find("button.saveButton");
 saveButton.click(function(){this.save();});

};
...

When I click the button, it complains that this.save is not a function. This is because "this" does not refer to the instance of RustEditor here, but to the button. What variable can I use inside that callback closure to point to the instance of RustEditor? I could use rust.editor (it's name in the global scope) but that's smelly code.

Answer 1

Common practice is to enclose the this value like so:

 function RustEditor() {

 this.init = function() {
    var self = this;

    var saveButton = this.container.find("button.saveButton");
    saveButton.click(function(){self.save();});

 };

Update with suggestion from tvanfosson: this gets rebound when the event handler is invoked and thus you need to capture the reference to the class at the time the object is created with a variable that will retain that reference in the closure.

Answer 2

Within RustEditor() you could first copy a reference to the button and use that.

Answer 3

here is a very good article on 'this' and jQuery: jQuery's this: demystified