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类和事件处理程序

回答

相关问题