當上次也是動態創建時，如何讓 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); ）