JavaScript類和事件處理程序

我有這個JavaScript代碼的問題：JavaScript類和事件處理程序

function MyClass() { 
    var id_nr = Math.ceil(Math.random() * 999999); 
    this.button_id = 'button_' + id_nr; 
} 


MyClass.prototype = { 
    createButton: function() { 
     var msg = 'Button \'' + this.button_id + '\' was clicked'; 

     var my_button = (
      '<input type="button" id="' 
      + this.button_id 
      + '" value="Click Me" /\>' 
     ); 

     document.body.innerHTML += '<div>' + my_button + '</div>'; 
     document.getElementById(this.button_id).onclick = function() { alert(msg); } 
    } 
}; 


window.onload = function() { 
    var s = new MyClass(); 
    s.createButton(); 
};

是的，這個當前的代碼工作正常。

window.onload = function() { 
    var s = new MyClass(); 
    s.createButton(); 

    var w = new MyClass(); 
    w.createButton(); 

    /* ...and many other buttons */ 

};

出於某種原因，的onclick只有當我單擊已創建的最後按鈕事件將被觸發。但是，當我添加多個MyClass的對象出現的問題。我不知道爲什麼。

一個解決辦法可能是這樣的：

<input type="button" onclick="javascript:doSomeThing();" />

但不幸的是，這不是正確的解決辦法右排，因爲我的目標是，onclik事件應該能夠調用另一個類的方法爲好。（這些方法尚未創建）。

如何讓這段代碼正常工作？任何形式的幫助表示讚賞。

來源

2013-04-10 user2266705

當您使用innerHTML時，內容將從DOM中剝離，然後再次讀取並解析，從而打破您可能添加的任何過去的事件偵聽器。

如果你想在香草JS中做到這一點，考慮使用appendChild()，並且，我也會建議addEventListener()。然後，您的代碼看起來像這樣：

var my_button = document.createElement('input'); 
my_button.type = 'button'; 
my_button.id = this.button_id; 
my_button.value = 'Click me'; 

document.body.appendChild(my_button); 
my_button.addEventListener('click', function() { alert (msg) });

Working example with vanilla Javascript

如果達到使用一些jQuery的，會這樣更容易實現。你的方法看起來是這樣的：

var my_button = $('<input>') 
       .prop('type', 'button') 
       .prop('id', this.button_id) 
       .val('Click Me') 
       .on('click', function() { alert(msg) }); 

$('body').append(my_button)

Working example with jQuery

或者你也許可以使用jQuery.on()方法委託的事件處理程序，以您的按鈕的所有後續實例。

Working example with delegated event handler

來源

2013-04-10 15:32:18 Sunyatasattva

我已經試過jQuery，但同樣的錯誤依然存在。此外，ID-s不能成爲此處的原因：每個輸入元素在此代碼中都有一個唯一的ID。 – user2266705 2013-04-10 15:53:44

修正了我的回答，我誤讀了你的ID創建的方式 – Sunyatasattva 2013-04-10 15:56:07

我還在JSBin中添加了一些工作示例，請檢查它們！ :) – Sunyatasattva 2013-04-10 16:00:55

使用的innerHTML這裏似乎打破事件監聽器「點擊」。

您可以通過使用document.createElement方法來創建你的HTML元素避免這種情況：

var but = document.createElement("input"); 
but.type = "button"; 
but.id = this.button_id; 
but.value = "Click me"; 

document.body.appendChild(but);

本人來說，我更喜歡使用jQuery操縱DOM樹元素，因爲這確實提供了強大的工具。

來源

2013-04-10 15:44:01 Brugnar

JavaScript類和事件處理程序

回答

相關問題