对 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";
}
}
}
最佳答案
您的 showUserData
方法通过向内部 html 添加字符串来重置 DOM。因此,在该操作之后,实际上会重新创建元素#sr
,并且所有事件都应为其重新绑定(bind)。
尝试使用insertAdjacentHTML 。像这样的事情:
document.body.insertAdjacentHTML('beforeend', "Props in HTML tags");
关于javascript - 用 typescript 编写的 CLick 事件监听器自行解除绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60708041/