对于动态创建的复选框，单击事件处理程序不保留

Question

我有一个Javascript脚本，其中定义了一个称为“图层”的类。 我将代码放入Layer构造函数中，以便每次创建新的Layer对象时，与该图层关联的复选框都会添加到HTML文档中。 我还在构造函数中创建了一个JQuery事件处理程序，以便在单击新复选框时，根据复选框的状态在文档中显示或隐藏该层。 但是由于某种原因，事件处理程序仅适用于最近创建的图层。 不知何故，旧的事件处理程序已被覆盖。 我在这里搜索了类似的问题，发现使用JQuery的on函数而不是click是解决问题的方法，但是我仍然遇到同样的问题。 这是我的代码...

Layer2D.prototype.addToUI = function() {
    if (this.firstLayer()) {
        var layerDiv = document.createElement('div');
        layerDiv.className = 'content';
        layerDiv.id = 'layerNames';
    }
    else {
        var layerDiv = document.getElementById('layerNames');
    }

    layerDiv.innerHTML += '</br>' +
                          '<div class="ui toggle mini checkbox" id="layer' + this.name +'">' +
                          '<input type="checkbox" name="' + this.name + '" checked>' +
                          '</input>' +
                          '<label>' + this.name + '</label>' +
                          '</div>';

    if (this.firstLayer()) {
        var parentDiv = document.getElementById('layerMenu');
        parentDiv.appendChild(layerDiv);
    };
    $('#layer' + this.name).after('<br/>');

    var This = this;
    $('#layer' + this.name).on('click', ':input', function(e) {
        checked = $(this).is(':checked');
        console.log(This);
        if (checked === true) {
            This.show();
        }
        else { 
            This.hide();
        }
    });
};

Answer 1

您应该使用$（document）.on（'click'，'#layer'+ this.name，function（）{...}），它通常与动态添加的HTML一起使用。

Answer 2

innerHTML存在此问题。 如果使用Document.create方法创建动态元素，我认为将附加侦听器。 无论如何，您都可以将evenListener放在类似addEventListenerToBeer（）的函数中，并在innerHTML调用之后进行调用。

var d = document.createElement("div")
var t = document.createTextNode("i like beer");
d.id = "myId";
d.appendChild(t); 

Answer 3

您需要更换：

layerDiv.innerHTML += '</br>' +
                      '<div class="ui toggle mini checkbox" id="layer' + this.name +'">' +
                      '<input type="checkbox" name="' + this.name + '" checked>' +
                      '</input>' +
                      '<label>' + this.name + '</label>' +
                      '</div>';

对于：

let element="";
//****
element = '</br>' +
                      '<div class="ui toggle mini checkbox" id="layer' + this.name +'">' +
                      '<input type="checkbox" name="' + this.name + '" checked>' +
                      '</input>' +
                      '<label>' + this.name + '</label>' +
                      '</div>';
$(element).appendTo(layerDiv);

appendTo插入元素并使它们成为要查询的DOM的一部分...