如何將 onclick 事件添加到動態生成的 HTML 元素

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

您是否嘗試過添加事件偵聽器？ 所以在你的 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; } }) });

Answer 2

您必須再次將事件偵聽器添加到您添加的每個元素。 但不像 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);
}

如果我理解錯了，請隨時糾正我。