-2

I'm getting an error when setting on click to the dynamically added html elements in jquery. First of all i should say that i searched alot in this community but i get more confused .

here is my code :

var data = ['element1','element2','element3'] ;
var html = '' ;
for(let i = 0;i<data.length ; i++){
    const element = data[i]; 
    html += '<li id="'+element+'">'+element+'</li>' ;
}

I Want to add different click functions to every list item in this code using ids . any suggestions will be helpfull , thanks to this great community .

Moji.Michael
  • 133
  • 1
  • 1
  • 18
  • 1
    Add a single event listener to the
      , check the target of the event and depending on its id do different things. Look on SO for "event delegation"
     – Fabrizio Calderan Feb 05 '19 at 09:28
  • @fcalderan can you explain more ? i want to do it in for loop , actually when user clicks on every list item i want to connect to different socket connections . – Moji.Michael Feb 05 '19 at 09:30

3 Answers3

1

Here is an example using plain JavaScript showing how you can attach such click handlers to your dynamically created elements.

First you need to create the li's using document.createElement, then you set the text content and id of your li's. The click handler can be added by setting the onclick property or using the addEventListener method.

Once your li is set, you just have to append it to a container, here a list <ul>.

const elements = ['element1','element2','element3'];
const handlers = [
    () => console.log('hello 1'),
    () => console.log('hello 2'),
    () => console.log('hello 3')
];

const content = document.getElementById('content');

elements.forEach((id, i) => {
  const li = document.createElement('li');
  li.id = id;
  li.textContent = `Hello ${i}`;
  li.addEventListener('click', handlers[i]);;
  content.appendChild(li);
});
<ul id="content"></ul>
jo_va
  • 13,504
  • 3
  • 23
  • 47
  • This doesn't answer the question as there are no elements dynamically injected into the DOM in the example. – marekful Feb 05 '19 at 09:33
1

You can use document selector for dynamically created DOM elements. eg: for element1 

$(document).on("click","#element1",function(){
//your code snippet
});
Yadukrishnan M
  • 152
  • 14
0

You can attach the click event on the parent element, in this case, the <ul> element. In jQuery, the .on() function has a second selector parameter which can be the li in this case.

Within the callback function, you can use $(e.target).attr('id') to find the id of the current element being clicked. This can be used to take appropriate action based on its value.

See the code below.

var data = ['element1', 'element2', 'element3'];
var html = '';

html += '<ul id="ulElement">';
for (let i = 0; i < data.length; i++) {
  const element = data[i];
  html += '<li id="' + element + '">' + element + '</li>';
}
html += '</ul>';

$('#content').html(html);

$('#ulElement').on('click', 'li', function(e) {
  var clickId = $(e.target).attr('id');
  console.log(clickId)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content"></div>
Vivek
  • 2,665
  • 1
  • 18
  • 20