0

我对此 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();
};

是的，这个当前的代码工作正常。但是当我添加多个 MyClass 对象时会出现问题：

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

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

    /* ...and many other buttons */

};

出于某种原因，仅当我单击最后创建的按钮时才会触发onclick事件。我不知道为什么。

一种解决方法可能是这样的：

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

但不幸的是，这不是正确的解决方案，因为我的目标是 onclik 事件也应该能够调用另一个类方法。（这些方法尚未创建）。

如何使此代码正常工作？任何形式的帮助表示赞赏。

4

2 回答 2

0

当您使用时innerHTML，内容会从 DOM 中剥离，然后再次读取和解析，从而破坏您可能添加的任何过去的事件侦听器。

如果您想在 vanilla 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-10T15:32:18.153 回答
0

这里使用innerHTML 似乎破坏了事件监听器“onclick”。

您可以通过使用 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-10T15:44:01.407 回答