antur123 antur123 - 2 months ago 7
jQuery Question

'this' keyword overriden in JavaScript class when handling jQuery events

I have defined a class in JavaScript with a single method:

function MyClass(text) {
this.text = text;
}

MyClass.prototype.showText = function() {
alert(this.text);
}


Then, I defined a method that acts as a handler for a click event, using jQuery:

function MyClass(text) {
this.text = text;
$('#myButton').click(this.button_click);
}

MyClass.prototype.showText = function() {
alert(this.text);
};

MyClass.prototype.button_click = function() {
this.showText();
};


When I click the button, it fails saying:


Object #<HTMLInputElement> has no method 'showText'


It seems to be that
this
in jQuery click event handler refers the HTML element itself, and it does not refer the instance of the
MyClass
object.

How can I solve this situation?

jsFiddle available: http://jsfiddle.net/wLH8J/

Answer

That's an expected behaviour, try:

function MyClass(text) {
    var self = this;

    this.text = text;
    $('#myButton').click(function () {
      self.button_click();
    });
}

or in newer browsers (using bind):

function MyClass(text) {
    this.text = text;
    $('#myButton').click(this.button_click.bind(this));
}

or using jquery proxy:

function MyClass(text) {
    this.text = text;
    $('#myButton').click($.proxy(this.button_click, this));
}

further reading: