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>

类似这种绑定的东西可以让您的监听器在这里执行，您在这里调用函数是因为它可以立即执行。您也可以在这里尝试箭头功能，并从其内部调用delete函数，例如

<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);

onclick自动触发-如何动态创建按钮

2 个答案: