jQuery OO Event-binding

Basically, I've an object:

function tomatoe(name, owner) {
    $('<div>').click(this.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name);

    this.name = name;
    this.dead = false;
    this.owner = owner;
    this.squish = function() {
        console.log('Oh my Google, you killed ' + this.name + '!');
        this.dead = true;
        this.owner.sad = true;
    };
}

The functionality is pretty straightforward. When instantiated, create a div, attach a click handler to it, and staple it onto something. Upon instantiation, two parameters are passed: a name and an owner. The owner is a reference to another object.

There are two problems with this code:

1. The this reference in the squish function is broken, since it now refers to the element clicked.
2. Because of chaining, when actually attaching the event, "this" refers to either jQuery or the newly-created div element (not sure which yet), so this开发者_JS百科.squish is undefined and never called.

If it helps in any way, the owner object has a reference to all tomatoes.

You want to reassigned this to another variable so that the naming doesn't collide. It is also a good idea to create the div after you instantiated all of the variables.

function tomatoe(name, owner) {
    var that = this;

    that.name = name;
    that.dead = false;
    that.owner = owner;
    that.squish = function() {
        console.log('Oh my Google, you killed ' + that.name + '!');
        that.dead = true;
        that.owner.sad = true;
    };

    $('<div>').click(that.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name);

}

Well, the easiest way of doing what you want to do is to create a local variable to store a reference to the tomatoe object like so:

function tomatoe(name, owner) {
  var _this = this;
  $('<div>').click(this.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name);

  this.name = name;
  this.dead = false;
  this.owner = owner;
  this.squish = function() {
    console.log('Oh my Google, you killed ' + _this.name + '!');
    _this.dead = true;
    _this.owner.sad = true;
  };
}

try this:

function tomatoe(name, owner) {

    //make a reference to this with self
    var self = this;

    $('<div>').click(self.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name);

    this.name = name;
    this.dead = false;
    this.owner = owner;
    this.squish = function() {
        console.log('Oh my Google, you killed ' + this.name + '!');
        this.dead = true;
        this.owner.sad = true;
    };
}

what i would do if you want chanability:

var tomato = {
     name: null,
     dead: null,
     owner: null,

     init: function(name, owner){
          var self = this;
          $('<div>').click(self.squish)
                .appendTo(myElement).text('I\'m a happy tomatoe called ' + name);
          this.name = name;
          this.dead = false;
          this.owner = owner;
          return this;
     },

     squish: function(){
          console.log('Oh my Google, you killed ' + this.name + '!');
          this.dead = true;
          this.owner.sad = true;
          return this;
     }

}

//to instantiate it:
tomato.init(name, owner);

You have to place the jQuery line after the this.squish assignment! It is obviously undefined, until you assign a value to it.

function tomatoe(name, owner) {  

    var that = this;

    this.name = name;
    this.dead = false;
    this.owner = owner;
    this.squish = function() {
        console.log('Oh my Google, you killed ' + that.name + '!');
        that.dead = true;
        that.owner.sad = true;
    };

    $('<div>').click(this.squish).appendTo(myElement)
              .text('I\'m a happy tomatoe called ' + name);

}