my jquery plugin has the wrong scope

Question

I'm trying to write a simple plugin, enterkeypress, which extends the keypress event, but only fires when the key pressed is the enter key:

(function ($) {
  $.fn.enterkeypress = function (fn) {
    return this.keypress(function(event){
      if(event.which == '13'){
        event.preventDefault();
        fn();
        }
    });
  };
})(jQuery);

when testing this out, it correctly fires the event but the 'this' keyword references the window, not the element.

$(":text").enterkeypress(function(){console.log(this)});

that code will output Window in the console... I'd rather it output the input control.

What am I doing wrong here?

Daff · Accepted Answer · 2011-04-18 17:47:43Z

1

Use call or apply on the callback to alter the this reference:

(function ($) {
  $.fn.enterkeypress = function (fn) {
    return this.keypress(function(event){
      if(event.which == '13'){
        event.preventDefault();
        fn.apply(this);
        }
    });
  };
})(jQuery);

answered Apr 18, 2011 at 17:47

Daff

44.4k9 gold badges108 silver badges122 bronze badges

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

Comments

Chandu · Accepted Answer · 2011-04-18 17:47:44Z

0

The fn callback parameter being passed is still called using the global scope which is window. You should use either call or apply to execute fn using the jquery objects context.

Try this:

 (function ($) {
      $.fn.enterkeypress = function (fn) {
        return this.keypress(function(event){
          if(event.which == '13'){
            event.preventDefault();
           //#####NOTICE THE CHANGE HERE###.
            fn.call(this);
            }
        });
      };
    })(jQuery);

answered Apr 18, 2011 at 17:47

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

Collectives™ on Stack Overflow

my jquery plugin has the wrong scope

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related