Question

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

我看到了一些解决方案，但是它们都涉及jQuery，如何在生成后分配clickevent以便它们起作用？


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

});

因此，总而言之，我需要添加一些on click事件以在生成如上所述的新div时显示模式。

任何帮助都会很棒！

Answer 1

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

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

例如，在最后一行之后：

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

添加另一个EventListener，如下所示：

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

Answer 2

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

https://jsfiddle.net/prg9bwu8/

方框1是经典的html。框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>

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

2 个答案: