Обработка событий на динамически создаваемых объектах 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 (так что он не пуст).

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

Я попытался использовать вызовы(), 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); 
    }); 
    //... 
};