javascript - 为什么我无法将单击事件添加到动态插入的列表元素？

Question

我有一个项目的代码如下所示，我使用 JavaScript 插入列表元素，并单击每个元素，我必须调用一个函数。然而，它似乎不起作用。

var c = document.getElementById("content");

c.innerHTML += "<ul>";
        
for(var j = 0; j<5; j++){
          
    c.innerHTML += "<li id = '" + j +  "'>some stuff"+j+"</li>";
    
    document.getElementById(j).addEventListener("click", function(){ alert('this is test'); }, false);
      
  
}
c.innerHTML += "</ul>";

<div id = "content"> </div>

为什么点击事件没有被触发？我怎样才能做到这一点？

Answer 1

创建一个函数并使用它onclick。您还可以将 this(元素)作为参数传递给函数，您可以在该函数中获取对象属性。

var c = document.getElementById("content");

c.innerHTML += "<ul>";
        
for(var j = 0; j<5; j++){
          
    c.innerHTML += "<li id = '" + j +  "' onclick='alertMe(this)'>some stuff"+j+"</li>";
      
  
}
c.innerHTML += "</ul>";

function alertMe(obj){
alert('this is test from '+obj.id);
}

<div id = "content"> </div>

addEventListener 方法:-

只有将 document.getElementById 添加到 DOM 中后，才能调用它。在附加到 DOM 之前你无法访问它

如果您仍然想使用addEventListener，您可以通过在附加元素后添加监听器来实现，如下所示

var c = document.getElementById("content");

c.innerHTML += "<ul>";
        
for(var j = 0; j<5; j++){
          
    c.innerHTML += "<li id = '" + j +  "'>some stuff"+j+"</li>";
    
    document.getElementById(j).addEventListener("click", function(){ alert('this is test'); }, false);
      
  
}
c.innerHTML += "</ul>";

<div id = "content"> </div>

var c = document.getElementById("content");
c.innerHTML += "<ul>";
for (var j = 0; j < 5; j++) {
  c.innerHTML += "<li id = '" + j + "'>some stuff" + j + "</li>";
}
c.innerHTML += "</ul>";
for (var j = 0; j < 5; j++) {
  document.getElementById(j).addEventListener("click", function() {
    alert('this is test');
  }, false);
}

<div id="content"> </div>