how can you make li click dynamically when last was also created dynamically

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?

Can you please update your snippets into a single [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)? This way it's easier to understand and debug. — Reyno, Jun 30 '21 at 07:33
Does this answer your question? [Click event on newly created UL LI element](https://stackoverflow.com/questions/47565554/click-event-on-newly-created-ul-li-element) — Bourbia Brahim, Jun 30 '21 at 07:34
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Jun 30 '21 at 08:12

Fabrizio Calderan · Accepted Answer · 2021-06-30T10:16:57.563

2

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);)

edited Jun 30 '21 at 10:16

answered Jun 30 '21 at 07:34

Fabrizio Calderan

120,726
26
164
177

Thanks. I'm new in javascrip. Let me see what that evt returns because I wamt to update the contents of that clicked list element. I'll tell you how it went. Thanks again. – Mgambu Jun 30 '21 at 09:41
Fabrizio you're a star. It work I just needed to remove the ")" on line 6. – Mgambu Jun 30 '21 at 09:58
Fabrizio you're a star. It is working, I just needed to remove the ")" on line 6. '})'. I get clicked list data but now I actually wanted to pick name, surname and email because I want to update this data of my Firebase database so I'm not sure how to further build on top this single click event to get the others or may be I should introduce a popup dialog. Any ideas.. Thanks again man. – Mgambu Jun 30 '21 at 10:09
@Sfili_81 My apologies those snippets are not really going to make that much sense. In the first place I shouldn't have posted this with snippets. All the different section comes from HTML and Script files. Hope you get it. – Mgambu Jun 30 '21 at 16:03

how can you make li click dynamically when last was also created dynamically

1 Answers1