Question

I have a general (custom) jQuery plugin. $.fn.something(). This gets called on some objects in my DOM. Lets say

$('div.section').something()

Inside the function, I have something like this…

$.fn.something = function(options) {

    //here **this** refers to $('div.section') which is what I want

    $(window).bind('scroll', function(){
        //how do I get the 'this' from above into here.
    });

});

I can’t for the life of me get the reference to “this” from inside the plugin INSIDE the .bind() function. I have a workaround where I store “this” into the options array and pass it that way, but I can’t help thinking that there is a more straightforward way to do this.

Answer 1

You set the value of this in a variable and then use that instead…

$.fn.something = function(options) {

    var that = this;

    $(window).bind('scroll', function(){
        // use that!
    });

});

This may seem like a hack, but it is very common place.

If you’re able to use the methods introduced in ES5, without worrying about backwards compatibility, you could also use the Function.prototype.bind() function;

$(window).bind('scroll', (function(){
    // use this
}.bind(this)));