javascript - 用 typescript 编写的 CLick 事件侦听器自行解除绑定

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";
    }
}
}

标签： javascripttypescriptdom

Answer 1

您的showUserData方法通过将字符串添加到内部 html 来重置 DOM。因此，在该操作之后，字面上的元素#sr被重新创建，并且所有事件都应该再次为它绑定。尝试使用insertAdjacentHTML。像这样的东西：

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