Question

我的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事件也应该能够调用另一个类方法。（那些方法尚未创建。）

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

Answer 1

当您使用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

Answer 2

在这里使用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);

Personaly，我更喜欢使用jQuery来操作DOM树元素，因为它为此提供了非常强大的工具。

Javascript课程＆amp;事件处理程序

2 个答案: