Question

So I have a newly created Javascript object called EditableObject in my custom .js file

function EditableObject(e, dv, i) {
this.element = e;
this.default_value = dv;
this.set = 0;
this.id = i;

alert(this.element.html());

this.element.click(function (event) {
    alert(this.element.html());
});

}

In my main page, I have a div called “field” that has the text “yeah” in it like such:

 <div id="field">yeah</div>

In the script portion of my main page, I’ve got:

var t = new EditableObject($("#field"), "value", 1);

When the page loads, there is an alert box that says “yeah”. But when I click on the div, I get an error saying that “this.element is undefined”. Why is this happening?

Answer 1

Inside your click handler, this refers to a different scope (depending on browser, it’ll be the event object or the current function). You need a closure to access parent scope’s this:

var self = this;
this.element.click(function (event) {
    alert(self.element.html());
});