如何将点击事件处理程序添加到通过javascript创建的我的userChat类中

问题描述

我已经使用javascript创建了一个名为userChat的类，我希望能够将click事件处理程序添加到userChat类中，以便当我单击userChat时它将向我发送我所单击的用户的名称，问题是我添加了一个addEventListener，但是它不起作用，我不知道我在做什么错，请您能帮我，非常感谢。

    function updateUsers(socket){   
    socket.on('updateUsers',function(data){       
        let usuarios = document.querySelector('#usuarios');
        usuarios.innerHTML='';
        for(let i = 0; i < data.users.length; i++){
            let us = `<div class ="userChat">` +data.users[i] +`</div>`;
            usuarios.innerHTML += us;
            

            let userchat = document.querySelector('.userChat');
            userchat.addEventListener('click',function(){
            console.log('estas tocando al usuario: '+data.users[i]);
            });
        }       
    });
    }

解决方法

尝试这种方式

let us = `<div class ="userChat" onclick='getUser(data.users[0])'>` +data.users[i] +`</div>`;


function getUser(user){
  // user
}

,

您正在尝试将事件侦听器添加到刚刚在js中创建的元素（本例中为let us = ...）。您应该将此侦听器添加到该元素的父级中，该父级已经在DOM中，然后可以检查此点击是否由您的元素触发。换句话说，您需要将该事件“委托”到父元素（事件委托）。例如：

 <parent-element>.addEventListener('click',function (e) {
   if (e.target && e.target.classList.contains('userChat')) {
     //do something
   }
 });