How to add onclick event to dynamically generated HTML elements

Question

Im trying to develop a chat app that allows for users to create a new chat room.

I already have code that runs for each item in the list, on click, will add users to the new room

Javascript:

document.querySelectorAll('.select-room').forEach(li => {
    li.onclick = () => {
        let newroom = li.innerHTML;
        if (newroom == room){
            msg = `You are already in ${room} room.`
            printSysMsg(msg);
        } else {
            leaveRoom(room);
            joinRoom(newroom);
            room = newroom;
        }
    }
});

HTML:

            <nav id='sidebar'>
            <h4>ROOMS</h4>
            <ul id='room_list' >
                {% for room in rooms %}
                    <li class = 'select-room'>{{ room }}</li>
                {% endfor %}
            </ul>                
        </nav>

However, when i add new rooms, im not able to click on the list item straight away to change chat rooms, i would have to refresh the page.

Any help would be greatly appreciated

You can find a solution from below post; https://stackoverflow.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content — UgurVolkan, Nov 30 '19 at 15:36
@UgurVolkan I don't think that your link will help as the solutions there are written in jQuery and not in vanilla JS. jQuery has a completely different syntax and uses Event Delegation for problems like this. — Aaron3219, Nov 30 '19 at 16:03

score 1 · Answer 1 · answered Nov 30 '19 at 15:36

1

Have you tried adding an event listener? So in your forEach:

document.querySelectorAll('.select-room').forEach(li => {
    li.addEventListener('click', () => {
        let newroom = li.innerHTML;
        if (newroom == room){
            msg = `You are already in ${room} room.`
            printSysMsg(msg);
        } else {
            leaveRoom(room);
            joinRoom(newroom);
            room = newroom;
        }
    })
});

answered Nov 30 '19 at 15:36

JakeCroth

19
2

This will not work as the elements are created dynamically. – Aaron3219 Nov 30 '19 at 15:42
How should it. it just is another syntax of your code. – Aaron3219 Nov 30 '19 at 16:26
Hi aaron, how should i contact you. The code breaks upon adding the new listener – Nov 30 '19 at 16:36
I provided an answer. Maybe you can check it out. – Aaron3219 Nov 30 '19 at 16:45

score 1 · Accepted Answer · answered Nov 30 '19 at 15:55

You have to add the event listener again to each element you add. But not like JakeCroth tried to explain (at least if I understand you correctly). Instead, try it like this:

let lst = document.querySelector('.lst');
let btn = document.querySelector('.btn');

function addListItem() {
  let li = document.createElement('li');
  
  li.innerHTML = "New element";  
  li.addEventListener('click', testTheEventListener);
  lst.appendChild(li);
}

function testTheEventListener() {
  console.log("The event listener works!");
}

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', () => {
    testTheEventListener();
  });
});

<ul class='lst'>
  <li class="listItem">First</li>
  <li class="listItem">Second</li>
  <li class="listItem">Third</li>
</ul>

<button onclick="addListItem()" class='btn'>Add item</button>

So as you can see I add the event listener to all existing items:

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', () => {
    testTheEventListener();
  });
});

And if an item gets added dynamically I add the event listener to this item as well.

function addListItem() {
  let li = document.createElement('li');

  li.innerHTML = "New element";  
  li.addEventListener('click', testTheEventListener); //<--
  lst.appendChild(li);
}

If I understood you wrong, just feel free to correct me.

Yup you have understood me right. i needed to add the event listener to each of the dynamically added items in order for them to gain that functionality. Just that adding those lines of code seems to break it. The links are no longer added. I think i just have to troubleshoot this issue — , Nov 30 '19 at 17:29

How to add onclick event to dynamically generated HTML elements

2 Answers2