JavaScript "this" references the wrong object within an event handler

Question

I'm writing some MVC JavaScript code using Prototype. The problem is that when I reference this in the snippet below it does of course reference the Window object, whereas I need it to refer to my Controller instance so it can invoke my updateValue function, passing the HTML element ID.

I think I have to use bind or bindAsEventListener but I don't really understand how.

var Foo = {
  Controller: Class.create({
    observeEvents: function() {
      $$("#myform input").each(function(input) {
        input.observe("blur", this.updateValue(input.id); // <- wrong this!
      });
    },

    updateValue: function(elementID) {
      ...
    }
  })
}

Any help would be much appreciated.

Jason Orendorff · Accepted Answer · 2010-01-11 22:53:44Z

2

This should work.

    observeEvents: function() {
      var Controller = this;
      $$("#myform input").each(function(input) {
        input.observe("blur", Controller.updateValue.bind(Controller, input.id));
      });
     ...

If you don't ever want to learn how to use bind (and frankly I don't blame you) then you can forget about it and just use another teensy closure.

    observeEvents: function() {
      var Controller = this;
      $$("#myform input").each(function(input) {
        input.observe("blur", function(event) {
                                Controller.updateValue(input.id);
                              });
      });
     ...

edited Jan 11, 2010 at 22:53

answered Jan 11, 2010 at 17:06

Jason Orendorff

45.4k6 gold badges69 silver badges103 bronze badges

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

8 Comments

Rob Over a year ago

bind is so useful everyone should know how to use it, if only to better understand the scope of their functions and how they relate.

Upperstage Over a year ago

IMHO - one cannot program JS without understanding bind.

John Topley Over a year ago

I tried using bind as per your first example and it didn't work. The second example does work. Thank you.

Christian C. Salvadó Over a year ago

The bind example doesn't works because inside the each callback, this refers to the Global object.

Jason Orendorff Over a year ago

Hmm. Maybe jQuery has just spoiled me. I don't think I've ever actually used bind. Surprisingly often you can just write $("#myform input").live("blur", updateValue) and move on to the next problem.

|

Collectives™ on Stack Overflow

JavaScript "this" references the wrong object within an event handler

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related