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

Question

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/

Yoshi · Accepted Answer · 2012-05-15 08:38:40Z

11

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));
}

2 Comments

German Latorre Over a year ago

Excellent Yoshi, I'll give it a go to the $.proxy thing, it looks like the perfect solution to me, :-)

Yoshi Over a year ago

@antur123 You're welcome! The proxy is probably the safest bet regarding browser compatibility.

Quentin · Accepted Answer · 2012-05-15 08:21:11Z

2

this is determined when a function is called, not when it is defined. You have copied the function to the click handler, so when it is called it isn't associated with MyClass and this isn't what you want it to be.

You need to use a closure to store the value of this in a different variable.

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

answered May 15, 2012 at 8:21

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related