Вновь созданный элемент списка не всегда вызывает событие через Socket IO

Question

Попытка создать элемент события, который срабатывает при каждом новом элементе списка, сгенерированном на стороне клиента ввода-вывода сокета, но не работает

перемещение по событию внутри DOMcontentloaded, а также во время составления списка

 socket.on('chatroom created', chatroom => {
     const li = document.createElement('li');
     li.innerHTML = `${chatroom}`;
     li.classList.add('chats');
     document.querySelector('#chatrooms').append(li);
     document.querySelector('#chatroom-name').value = '';
     document.querySelector('.chats').onclick = () => {
       alert("hey there")
     };
   });

Только первый элемент списка имеет функцию onclick. Но не другие

Answer 1

Это потому, что вы используете querySelector, который выбирает только первый элемент.Используйте querySelectorAll и повторите их, чтобы добавить всех слушателей:

document.querySelectorAll(".chats").forEach(elem => elem.onclick = () => alert("hey there"));