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

出于某种原因，只有在我单击上次创建的按钮时才会触发onclick事件。我不知道为什么

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

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

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

---

如何使此代码正常工作？非常感谢您提供的任何帮助。

当您使用

innerHTML

时，内容将从DOM中剥离，然后重新读取和解析，从而中断您可能添加的任何过去的事件侦听器

如果你想在香草JS中使用，请考虑使用，并且，我也建议。您的代码将如下所示：

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

如果您想使用一些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)

var my_按钮=$（“”）
.prop（'类型'，'按钮'）
.prop（'id'，此.button\u id）
.val（'单击我'）
.on（'click'，函数（）{alert（msg）}）；
$（'body'）.append（我的_按钮）

或者，您也可以使用该方法将事件处理程序委托给按钮的所有后续实例

---

这里使用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树元素，因为它提供了非常强大的工具。

我已经尝试过jQuery，但仍然存在相同的错误。此外，ID-s不能成为此处的原因：在这段代码中，每个输入元素都有一个唯一的ID这个小把戏真的奏效了！非常感谢。首先，我认为它与使用innerHTML具有相同的效果。所以我从来没有费心去使用它。这只是因为innerHTML属性完全重新解析HTML，而您的事件处理程序消失了！

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

document.body.appendChild(but);