Javascript 'this' pointer in jQuery

Question

I've created an object obj:

function a(id, ...){
   this.id = id;
   ......
}

var obj = new a("#somediv", ...);

and I have this function:

a.prototype.b = function(){
    $(this.id+" span").mouseover(function(){
        $(this.id).addClass("c");
    });

};

Apparently, the this in the mouseover function points to the span instead of obj...

I know I can solve this problem by creating a variable and getting the property of this.id but

is there a way to make the this in the mouseover function point to obj instead?

Answer 1

With pure JavaScript in newer browsers, you can bind the function:

a.prototype.b = function(){
    $(this.id+" span").mouseover(function(){
        $(this.id).addClass("c");
    }.bind(this));
};

With jQuery, you can get better browser support:

a.prototype.b = function(){
    $(this.id+" span").mouseover($.proxy(function(){
        $(this.id).addClass("c");
    }, this));
};