Getting correct "this" in jQuery button callback

javascript, oop, this

Solution

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.

Problem

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.

Original source