onclick自动触发-如何在飞行中创建按钮

Question

我试图搜索类似的问题，但找不到解决方案。

我有一段代码，它正在创建一些HTML以附加到div：

var list="<ul>";
for(i=0; i<data.length; i++) {
sid=data[i].sid;
list += "blablabla <a onclick=delete(sid)>delete</a></li>";
}
list +="</ul>";
document.getElementById("my_container").innerHTML = list;

函数delete(sid(:

function delete(Sid){
doSomething(taskSid,
function(error) {
if(error) {
console.log(error.code);
console.log(error.message);
return;
}
console.log("deleted");
}
);

问题是函数delete(sid(是自动调用的。我读到这是因为我直接调用函数，我尝试了不同的建议解决方案，但无法真正使它们发挥作用。

我的代码将创建几个行，这些行有这个按钮或链接，需要调用函数delete。

也许拥有一个容器并用javascript定义列表的方法也是完全错误的？感谢您的帮助。

感谢

Answer 1

您应该尝试绑定函数

<a onclick=delete.bind(null,sid)>delete</a>

类似于这种绑定的东西可以让您的侦听器在这里执行，您正在调用函数，因此它可以立即执行。你也可以在这里尝试箭头函数，并从里面调用删除函数，比如这个

<a onclick=()=>delete(sid)>delete</a>

Answer 2

更好的方法是使用createElement方法。类似这样的东西：

let list = document.createElement('ul');
for(i = 0; i<data.length; i++) {
let sid=data[i].sid;
let link = document.createElement('li');
link.innerHTML = 'delete';
link.onclick = function(){
deleteTask(sid);
};
list.appendChild(link);
}
document.getElementById("my_container").appendChild(list);