我正在尝试开发允许用户创建新聊天室的聊天应用程序。
我已经为列表中的每个项目运行了代码,单击后会将用户添加到新房间
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>
但是,当我添加新房间时,我无法立即单击列表项来更改聊天室,因此我必须刷新页面。
任何帮助将不胜感激
您必须将事件侦听器再次添加到添加的每个元素。但是不像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);
}
如果我理解您错了,请随时纠正我。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句