OO Javascript / jQuery event click handler

Question

I'm new on JS developing, I'm trying to use OO Javascript using "classes", I have a class named "Timeblock", with it constructor:

var Timeblock = function(occupied, on, element) {
  this.occupied = occupied;
  this.on = on;
  this.room_id = 0;
  this.element= element;
}

I've created an object this way:

timeblock = new Timeblock(false, false, $('#element'));

Everything works at this point, now I'm trying to add a click event listener to the class constructor on its element var, I tried:

var Timeblock = function(occupied, on, element) {
  this.occupied = occupied;
  this.on = on;
  this.room_id = 0;
  this.element = element;

  timeblock = this;
  this.element.click(function() {
      timeblock.update();
  });
}

Timeblock.prototype.update = function() {
  if (!occupied) {
    this.element.addClass('on');
  }
}

When debugging in Chrome, I put a breakpoint on this.element.addClass('on'); inspecting the object I can read this.element: jQuery.fn.init[0] and I can't get it to work.

Even in console when I type this.element I get undefined, but if I type this.occupiedI get false

My question is, why I'm getting undefined? how can I make it work?, I've searched and searched but can't find any good material to study OO Javascript.

Scimonster · Accepted Answer · 2015-02-08 20:06:47Z

4

var Timeblock = function(occupied, on, element) {
  this.occupied = occupied;
  this.on = on;
  this.room_id = 0;
  this.element = element;

  var timeblock = this; // need var statement
  this.element.click(function() {
      timeblock.update();
  });
}

Timeblock.prototype.update = function() {
  if (!this.occupied) { // forgot this
    this.element.addClass('on');
  }
}

Two errors. I fixed them, and left comments explaining.

answered Feb 8, 2015 at 20:06

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

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

2 Comments

Fantini Over a year ago

Thaks, it works, but why the var statement is needed?

Scimonster Over a year ago

Because otherwise it becomes a global, and is overwritten every time you initialize a new Timeblock.

Collectives™ on Stack Overflow

OO Javascript / jQuery event click handler

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related