当上次也是动态创建时，如何让 li 动态点击

Question

该列表是动态生成的，如下所示；

 function addItemsToList(name, surname, location, town, userid, email) { var listEmployeesInfo=document.getElementById('mListHeader'); listEmployeesInfo.innerHTML='Province Retrieved: '+(location)+' | Town: '+(town); var ul=document.getElementById('list'); var header=document.createElement('h2'); var _name=document.createElement('li'); var _surname=document.createElement('li'); var _userid=document.createElement('li'); var _email=document.createElement('li'); _name.innerHTML='Name : '+name; _surname.innerHTML='Surname : '+surname; _userid.innerHTML='User ID : '+userid; _email.innerHTML='Email : '+email; ul.append(header); ul.appendChild(_name); ul.appendChild(_surname); ul.appendChild(_userid); ul.appendChild(_email); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="column right" style="overflow-y: auto; height: 500px; " id="listDiv"> <h3 id="mListHeader" style="padding-left: 10px;">Employee List Viewed</h3><br> <button id="btn-Update">Update</button> <ul class="empList" id="list"> </ul> </div>

如何使 li 元素可以点击？ 因为我想能够更新点击组的姓名、姓氏、ID 和电子邮件？

Answer 1

在父列表上使用事件委托

var ul = document.getElementById('list');
ul.addEventListener('click', function(evt) {
   var tgt = evt.target;
   if (tgt.matches('li')) {
      console.log(tgt.textContent);
   } 
});

所以你只用一个事件处理程序在冒泡阶段捕获点击事件，无论列表项是否已经在文档中或者它们是否已经动态创建。

作为旁注，您不能将标题附加为列表的子项（ ul.append(header); ）