Jquery cannot access $(this) in callback function

Question

I am creating a plugin and it cannot access $(this). A simple overview of my plugin is

(function($){
    $.fn.myPlugin= function(options, callback) {
        return this.each(function(){
                $(this).click(function(){
                      // some plugin works ..

                      callback();
                });
        });
    };

})(jQuery);

Then i attached my plugin to a element like

$('p').myPlugin({
      // Some options
}, function(){
      alert('first test');
      alert($(this).text());
});

Here when the element p is clicked, i get the first alert, but i didn't get the 2nd alert.

The callback function is called, but unable to access this. Is there any problem with the defining or with code ? any alternative suggestion will also be helpful

Nick Craver · Accepted Answer · 2010-07-25 11:47:20Z

4

Instead of callback();, use .apply() to give it the right context (otherwise it's window), like this:

callback.apply(this);

You can see the updated/working version here.

For a more complete overview here, you can pass more arguments if you want to that callback, for example if you wanted to make the options available, you could do this:

(function($){
  $.fn.myPlugin= function(options, callback) {
    return this.each(function(){
      $(this).click(function(){
        callback.apply(this, [options]);
     });
   });
 };
})(jQuery);

Then call it like this:

$('p').myPlugin({
    thing: "thing1"
}, function(opts){
    alert(opts.thing); //thing1
});

You can give that one a try here, just add whatever arguments you want to that array, callback() will be called with those arguments :)

edited Jul 25, 2010 at 11:47

answered Jul 25, 2010 at 11:39

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Skay · Accepted Answer · 2010-07-25 11:40:49Z

1

Nick Craver is right. But for understanding what is going on follow this link: http://howtonode.org/what-is-this

answered Jul 25, 2010 at 11:40

Skay

9,5136 gold badges29 silver badges29 bronze badges

Comments

jdzakarian · Accepted Answer · 2011-12-21 21:28:44Z

0

Can you please post a complete example that uses the autocomplete widget?

Here is what I wanted to do...

    $('.suggest').autocomplete({
    source: function(request, response) {
        typ = $(this).getAttr("class").split(" ")[2]
        ....

...but this returns undefined. For now I am using document.activeElement, but I would prefer Nick Craver's method.

answered Dec 21, 2011 at 21:28

jdzakarian

1312 silver badges6 bronze badges

Collectives™ on Stack Overflow

Jquery cannot access $(this) in callback function

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related