CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
nicholasodonnell
nicholasodonnell

Reputation: 71

How to use '$(this)' in a jquery plugin parameters

I'm writing a jQuery plugin and am trying to use the $(this) selector in one of the parameters, but it's undefined.

Here's my code:

$('.foo').loadMore({
    onScreen: function() {
        $(this).css('background-color', 'red');
    }
})

And here's the code in my plugin:

$.fn.loadMore = function( options ) {

    var settings = $.extend({
        onScreen: function(){}, 
    }, options);

    return this.each(function(index, ele) {
        settings.onScreen();
    });
};

Upvotes: 0

Views: 49

Answers (1)

Felix Kling
Felix Kling

Reputation: 816262

You have to call onScreen with the correct this value:

settings.onScreen.call(this);

If you want to be more in line with the built-in jQuery methods, you can pass the index and element as well:

settings.onScreen.call(this, index, this);

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Upvotes: 1

Related Questions