新生成元素的子元素的事件监听器不起作用答案

【问题标题】：eventlisteners on child of new generated element not working新生成元素的子元素的事件监听器不起作用
【发布时间】：2019-10-21 04:18:42
【问题描述】：

我的页面有问题，它有一个创建新 div 的功能（像 trello 这样的卡片），我可以将它们从“生成器”字段拖到工作区。这些卡片上有一些带有附加点击事件的按钮。生成器代码正确地附加了卡片的不同子项，但问题是点击事件在生成的卡片上不起作用，只有当我已经在 html 中手动制作了这个 div 时。我看到了一些解决方案，但它们都涉及 jQuery，如何在生成时分配点击事件以便它们工作？

我看到了一些解决方案，但它们都涉及 jQuery，如何在生成时分配 clickevents 以便它们工作？


// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btns = document.getElementsByClassName("comment");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    modal.style.display = "block";
  }
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


//Generator code to make new cards

document.getElementById("newCombBtn").addEventListener("click", function() {

    var hex = document.createElement("div");
    hex.className = "hexagon";

    var like = document.createElement("button");
    like.innerHTML = "&#x2665";
    like.id = "likebtn";

    var del = document.createElement("button");
    del.innerHTML = "&#10799";
    del.id = "deletebtn";

    var inp = document.createElement("input");
    inp.className = "input";
    inp.placeholder = "Title";

    var com = document.createElement("button");
    com.innerHTML = "&#x2261";
    com.className = "comment";


    hex.appendChild(like);
    hex.appendChild(del);
    hex.appendChild(inp);
    hex.appendChild(com);
    document.getElementById("generatorField").appendChild(hex);

});

所以总结一下，当我像上面那样生成新的 div 时，我需要添加点击事件以显示模式。

任何帮助都会很棒！

【问题讨论】：

接受的答案不是好的做法，您应该将事件侦听器作为委托添加到父元素。 gomakethings.com/…

标签： javascript css addeventlistener dom-events

【解决方案1】：

在您创建btns, model, span NodeLists 时，您之后生成的其他按钮还不存在，这就是为什么没有附加EventListener 的原因。

在将新元素 hex 附加到 DOM 后，只需添加 EventListeners。

例如最后一行之后：

document.getElementById("generatorField").appendChild(hex)

像这样添加另一个EventListener：

hex.addEventListener('click', function(){
  //do what needs to be done when the new element is clicked
})

【讨论】：

【解决方案2】：

如果您在注册事件后创建新的 DOM 元素，则事件仅适用于旧元素。但是您可以在一个函数中注册所有事件，并在添加新的 DOM 元素后调用该函数。

https://jsfiddle.net/prg9bwu8/

框 1 是经典的 html。 Box 2 是用 JS 创建的。

function bindEvents() {
            document.getElementById("FirstBox").onclick = function () {
                alert("Box 1 function");
            }

            document.getElementById("SecondBox").onclick = function () {
                alert("Box 2 function");
            }
        }
        

        var newBox = document.createElement("div");
        newBox.className = "box";
        newBox.id = "SecondBox";
        document.getElementById("Test").appendChild(newBox);
        
        bindEvents();

.box{
            width: 200px;
            height:100px;
            border:1px solid;
            background:lightyellow;
        }

<div id="Test">
        <div id="FirstBox" class="box"></div>
    </div>

【讨论】：