The following code doesn't work as I intuitively expect it to:

function MyObject(input) {
   input.change(this._foo);
   this.X = undefined;
}

MyObject.prototype._foo = function() {
   alert("This code is never called");
   // but if it did
   this.X = true;
}

var test_input = $("input#xyz"); // a random, existing input

var m = MyObject(test_input); // attach handler (or try to)

test_input.change(); // trigger event

alert(m.X); // undefined

I'd expect that _foo() would be called (and, if that ever happens, that the this variable in _foo() would be an instantiation of MyObject.

Does anyone know why this doesn't work, and of any alternative pattern for passing an object to an event handler?

Thank you for reading.

Brian

The following code doesn't work as I intuitively expect it to:

function MyObject(input) {
   input.change(this._foo);
   this.X = undefined;
}

MyObject.prototype._foo = function() {
   alert("This code is never called");
   // but if it did
   this.X = true;
}

var test_input = $("input#xyz"); // a random, existing input

var m = MyObject(test_input); // attach handler (or try to)

test_input.change(); // trigger event

alert(m.X); // undefined

I'd expect that _foo() would be called (and, if that ever happens, that the this variable in _foo() would be an instantiation of MyObject.

Does anyone know why this doesn't work, and of any alternative pattern for passing an object to an event handler?

Thank you for reading.

Brian

• javascript
• jquery
• prototype
• object
• closures

Share Follow asked Jun 10, 2010 at 21:12 Brian M. HuntBrian M. Hunt 84k7676 gold badges234234 silver badges349349 bronze badges 3

• There are existing methods for attaching events (bind(), live()) and triggering events (trigger()) in jQuery. I'm not sure what you're getting at here. Also, it seems to me that if you want an objects method called, you need to call it like this._foo() and not this._foo otherwise you're doing assignment. It's entirely possible I'm misunderstanding you though. – artlung Commented Jun 10, 2010 at 22:12
• possible duplicate of How to access the correct `this` / context inside a callback? – Bergi Commented Feb 27, 2014 at 18:59
• Thanks Bergi. The referenced question was asked three years after this one was closed, so wouldn't the duplication would actually go the other direction? It is incorrect and seems misleading to mark this question as "already answered" by a question that came by three years later. Would that question not be a duplicate of this one? – Brian M. Hunt Commented Feb 27, 2014 at 19:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

As Kenny points out you're missing the new. You also need to make sure that this in _foo refers to the MyObject instance
One way to do it:-

function MyObject( input ) {
    var _this = this;
    input.change( function() {
       // explicitly set the `this` in _foo to `_this`
        _this._foo.call( _this );
    });
   this.X = undefined;
}

MyObject.prototype._foo = function( event ) {
   alert("This is called");
   // and 'this', being 'm', has X set to true
   this.X = true;
   // the textbox must be accessed by 'event.target' not 'this' if you need it
}

var test_input = jQuery("input#xyz"); // a random, existing input

var m = new MyObject(test_input); // attach handler (or try to)

test_input.change(); // trigger event

alert(m.X); // true

P.S You can't avoid using the new operator by leaving it out! :)

To create an object in Javascript, use new.

var m = new MyObject(test_input); // attach handler (or try to)

This question is kind of old now, but there's another solution. Your problem is as meouw mentioned, you missed the 'new', and the 'this' reference in an event handler will always be the element on which the event was triggered, not the object handling the event.

Since you're using JQuery, there's an easy way to get this to act the way you want. Use the JQuery.proxy method to set the context of the event handler to use your object as 'this'. In your example, you just have to change the line

input.change(this._foo);

to

input.change(jQuery.proxy( this, "_foo" )); 

Give that a try if you run into this problem with JQuery again.