Question

这是我的问题。我有一个函数，我动态创建<input />元素，我试图在mouseclick上使用参数注册一个处理程序。我几次调用这个函数，只有最后一个输入分配了处理程序。这是简化的代码：

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>

当我点击第3个元素时会弹出一个警告，但其他两个元素什么都不做。我做错了什么？

Answer 1

这一行代码，您现在已经通过以下方式澄清了答案：

div.innerHTML += " ";

消除了分配给myId子元素的所有以前的编程事件处理程序，因此唯一剩下的是您添加的最后一个 - 因此为什么只有最后一个输入处理程序才能工作。分配给innerHTML从头开始重新分配HTML并重新初始化所有这些对象。您对它们所做的任何编程更改（在您的情况下，指定单击处理程序）可能会丢失。

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

Answer 2

我认为这是一个范围问题。

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

尝试为您的活动使用闭包。

http://www.google.com/search?client=safari&rls=en&q=javascript+closures&ie=UTF-8&oe=UTF-8

Answer 3

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

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

3 个答案: