如何向动态生成的HTML元素添加onclick事件

Question

我正在尝试开发一个聊天应用程序，允许用户创建一个新的聊天室。

我已经有了为列表中的每个项目运行的代码，单击一下，就会将用户添加到新聊天室

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>

但是，当我添加新的聊天室时，我不能直接点击列表项来更改聊天室，我必须刷新页面。

任何帮助都将不胜感激

Answer 1

您必须将事件侦听器重新添加到您添加的每个元素。但不像JakeCroth试图解释的那样(至少如果我正确理解你的话)。相反，可以像这样尝试：

​

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>

​

如您所见，我将事件侦听器添加到所有现有项中：

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

如果项目是动态添加的，我也会将事件侦听器添加到该项目中。

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

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

如果我理解错了，请随时纠正我。

Answer 2

您是否尝试过添加事件侦听器？所以在你的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;
        }
    })
});

​