[英]How to add onclick event to dynamically generated HTML elements
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: 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: 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任何帮助将不胜感激
Have you tried adding an event listener?您是否尝试过添加事件侦听器? So in your forEach:所以在你的 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; } }) });
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).但不像 JakeCroth 试图解释的那样(至少如果我理解正确的话)。 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.如果我理解错了,请随时纠正我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.