Handling events on dynamically generated JavaScript objects

Question

I have an object I created in JavaScript. Let's say it looks like this:

function MyObject() {
    this.secretIdea = "My Secret Idea!";
};

MyObject.prototype.load = function() {
    this.MyButton = $(document.createElement("a"));
    this.MyButton.addClass("CoolButtonClass");
    this.MyButton.click = MyButton.onButtonClick;
    someRandomHtmlObject.append(this.MyButton);
};

MyObject.prototype.onButtonClick = function(e) {
    alert(this.secretIdea);
};

As you can see, I have an object setup in JavaScript and, when it's loaded, it creates an anchor tag. This anchor tag as a background image in CSS (so it's not empty).

Now, I understand that the 'this' statement, when the button would actually be clicked, would fall to the scope of the MyButton element rather than the object I have created.

I have tried using call(), try() and bind() and I cannot get this to work. I need it so that, when the button is clicked, it goes back to the object's scope and not the html element's scope.

What am I missing here?

Christian C. Salvadó · Accepted Answer · 2010-06-18 18:38:58Z

1

The this value inside the click event handler refers to the DOM element, not to the object instance of your constructor.

You need to persist that value, also you refer to MyButton.onButtonClick I think you want to refer the onButtonClick method declared on MyObject.prototype:

MyObject.prototype.load = function() {
    var instance = this;
    //..
    this.MyButton.click(function (e) { // <-- looks like you are using jQuery
      // here `this` refers to `MyButton`
      instance.onButtonClick(e);
    });
    //...
};

answered Jun 18, 2010 at 18:38

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

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

Collectives™ on Stack Overflow

Handling events on dynamically generated JavaScript objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related