[英]How to add onclick event to dynamically generated HTML elements
我正在尝试开发一个聊天应用程序,允许用户创建一个新的聊天室。
我已经有为列表中的每个项目运行的代码,点击后,会将用户添加到新房间
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>
但是,当我添加新房间时,我无法立即单击列表项来更改聊天室,我必须刷新页面。
任何帮助将不胜感激
您是否尝试过添加事件侦听器? 所以在你的 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; } }) });
您必须再次将事件侦听器添加到您添加的每个元素。 但不像 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);
}
如果我理解错了,请随时纠正我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.