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

Question

The list was dynamically produced as follow;

 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>

How can I make li elements clicker-able? because I want to able to update name, surname, id and email of clicked group?

Answer 1

Use event delegation on the parent list

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

so you capture the click event on the bubbling phase with only one event handler, no matter if the list-items are already in the document or if they have been dynamically created.

As a side note you can't append a header as a child of a list ( ul.append(header); )