Обработка событий в динамически генерируемых объектах JavaScript

Question

У меня есть объект, который я создал в JavaScript.Допустим, это выглядит так:

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);
};

Как видите, у меня есть объект настройки в JavaScript и, когда он загружен, он создает тег привязки.Этот тег привязки в качестве фонового изображения в CSS (поэтому он не пустой).

Теперь я понимаю, что выражение «this», когда кнопка будет фактически нажата, попадет в область действия элемента MyButtonа не объект, который я создал.

Я пытался использовать call (), try () и bind (), и я не могу заставить это работать.Мне нужно, чтобы при нажатии кнопки она возвращалась в область объекта, а не в область элемента html.

Что мне здесь не хватает?

Answer 1

Значение this внутри обработчика события click относится к элементу DOM, а не к экземпляру объекта вашего конструктора.

Вам необходимо сохранить это значение, также вы ссылаетесь на MyButton.onButtonClick Я думаювы хотите сослаться на метод onButtonClick, объявленный в 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);
    });
    //...
};