javascript - 使用 querySelectorAll 为新创建的元素创建一个循环

Question

我想要做的是使用该querySelectorAll()函数创建一个循环，我可以在其中定位我使用我<li/>创建的函数创建的每个新元素getInput()（效果很好）。我想用它console.log()来测试它，这样当我点击每个<li/>项目时，它会确认我已经在控制台中这样做了。这种querySelectorAll()方法对我来说是新的，而且我在学习 Javascript 方面也很陌生。因此，任何建议和解释都会非常有帮助。谢谢。

function getInput() {
    var liValue = theForm.elements.input.value;  
    var liNew = document.createElement("li");
    liNew.innerHTML += liValue;
    var list = document.getElementById("ulList");
    list.appendChild(liNew); 
    deleteLi;
 }

 function deleteLi() {
    var handlers = document.querySelectorAll("li");
    for (var i = 0; i < handlers.lenghth; i++) {
        handlers[i].onclick = console.log("you got me");
    }
 }

Answer 1

只需在创建元素时添加点击处理程序。运行您发布的 qSA 并选择所有li元素，即使是您已经创建的元素。

function getInput() {
    var liValue = theForm.elements.input.value;  
    var liNew = document.createElement("li");
    liNew.onclick = function() { console.log("clicked!"); };
    liNew.innerHTML += liValue;
    var list = document.getElementById("ulList");
    list.appendChild(liNew); 
}