Javascript 将参数传递给动态创建的处理程序

这是我的问题。我有一个函数，可以在其中动态创建

元素，并尝试使用参数在

鼠标单击

上注册一个处理程序。我调用这个函数几次，只有最后一个输入被分配了处理程序。以下是简化代码：

function create() {
    var div = document.getElementById("myId");
    var vRemove = document.createElement("span");
    vRemove.innerHTML = "remove";
    var foo = 4;
    vRemove.onclick = function(){ remove(foo); }
    div.innerHTML += " ";
    div.appendChild(vRemove);
}

function remove(id) {
    alert(id);    
}

create();
create();
create();

在HTML中，我只有一个div：

<div id='myId'></div>

---

当我单击第三个元素时，会弹出一个警报，但其他两个元素什么也不做。我做错了什么？

我认为这是一个范围问题

您正在访问匿名函数中的私有变量

尝试对事件使用闭包

---

您是否尝试过为您创建的新对象提供不同的ID？

这行代码，您现在已经用以下代码澄清了您的答案：

div.innerHTML += " ";

清除所有先前分配给

myId

子级的编程事件处理程序，因此只剩下最后一个添加的事件处理程序-因此，为什么只有最后一个输入处理程序工作。分配给innerHTML将从头重新解析HTML并重新初始化所有这些对象。您对它们所做的任何编程更改（在您的情况下，分配一个单击处理程序）都可能丢失

---

使用innerHTML修改页面的缺点是，它可能会破坏编程指定的事件处理程序和其他编程更改。我尝试只在构建新HTML或设置一个元素的内容（例如，显示什么文本）时使用它。

我不确定您的问题是什么。当您在中运行此代码时，它似乎会响应所有三个跨度中的单击。请澄清问题是什么。哦，它起作用了，你是对的。我留下了1行代码，因为我认为它并不重要：div.innerHTML+=“”；（见编辑后的文章）。它只是测试没有css的代码，我需要在创建的跨距之间留出空间。不知道为什么会出现这个问题。我不知道appendChild在内部是如何工作的，但是向div中添加一些文本，然后再追加child对我来说似乎是可行的。好的，我已经添加了一个答案，描述了为什么

div.innerHTML+=”

行导致了您的问题。感谢回复，但变量不是我的问题，我甚至可以提醒一些静态文本：alert（“asd”）；只有last注册了onclick事件。但我发现了问题所在。见我对jfriend00评论的回答。谢谢你的时间和提醒。我不确定是否有一些很好的带有javascript文档的网页（比如php.net for php），它可以帮助我解决这类问题，但我找不到。