Question

我有一个Javascript脚本，我在其中定义了一个名为＆＃34; Layer＆＃34;的类。我将代码放在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的一部分......

单击事件处理程序不会持久保存动态创建的复选框

3 个答案: