處理動態生成的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值引用DOM元素，而不是構造函數的對象實例。

你需要堅持這個值，你也指MyButton.onButtonClick我想你想將關於MyObject.prototype宣佈onButtonClick方法：

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