Question

我有一个代码显示如下项目，我使用javascript插入列表元素，并点击我必须调用函数的每个元素。但是，它似乎不起作用。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

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

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>

Answer 2

尝试理解以下魔法

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>";

setTimeout(function () {
	for(var j = 0; j<5; j++){    
    document.getElementById(j).addEventListener("click", function(){ alert('this is test'); }, false);    
  }
});

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

Answer 3

OP不起作用的原因是：

c.innerHTML += "<li id = '" + j +  "'>some stuff"+j+"</li>";

当您连接到innHTML属性时，元素内容首先被序列化，这将删除任何非内联的侦听器（例如，由 addEventListener 添加的侦听器）。因此，在循环结束时剩下的唯一一个是最后一个。

但是你这样做：

c.innerHTML += "</ul>";

也删除了最后一个。

建立单个标记字符串并使用 innerHTML 一次就好了。

考虑一下：在输入结束标记之前，浏览器应该使用开放的UL标记做什么？您已将无效标记添加到文档中，因此必须使用错误更正来使某些内容有效，因此最终可能会出现与预期不符的结构。

对于侦听器，您可以将它们与标记的其余部分一起包含在内，以便它们在序列化和解析后继续存在。

或者，使用DOM方法创建元素并停止使用 innerHTML 。

function doClick(){
  alert('this is a test ' + this.id);
}

window.onload = function() {
  var c = document.getElementById("content");
  var list = document.createElement('ul');
       
  for(var j = 0; j<5; j++){
    var li = list.appendChild(document.createElement('li'));
    li.textContent = 'some stuff ' + j;
    li.id = j;
    li.addEventListener('click', doClick, false);
  }
  c.appendChild(list);
};

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

为什么我无法将click事件添加到动态插入列表的元素中？

3 个答案: