javascript - 用 typescript 编写的 CLick 事件监听器自行解除绑定(bind)

Question

对 Typescript 相当陌生，但有一些 JavaScript 经验。无法弄清楚为什么会出现这样的行为。将事件监听器附加到按钮，例如

document.querySelector("#sr").addEventListener("click", function () {
        console.log(1);
        new GetApi().entered_name();
    });

第一次运行正常，但之后就不行了。但是当我删除 new GetApi().entered_name() 时，它始终工作正常。

这是函数

entered_name()
     {
       console.log(document.getElementById("fname").value);
        return fetch("https://localhost:5001/api?search="+document.getElementById("fname").value)
            .then(Response=>Response.json())
            .then(data=>{
         console.log(data[0]);
         let res =new UserData(data[0]);
         console.log(res);
         let obj = new Display1();
         obj.showUserData(res);  


       }).catch(err=>console.log(err));
     }

这是showUserData()

export class Display1
{
    showUserData(obj : UserData){
    {
        document.body.innerHTML += "Props in HTML tags";
    }
}
}

Answer 1

您的 showUserData 方法通过向内部 html 添加字符串来重置 DOM。因此，在该操作之后，实际上会重新创建元素#sr，并且所有事件都应为其重新绑定(bind)。尝试使用insertAdjacentHTML 。像这样的事情:

document.body.insertAdjacentHTML('beforeend', "Props in HTML tags");