Question

我正在尝试做一件简单的事情，这是我的HTML：

<div id="div1">
    <a id="first" href="#">First</a>
</div>

这是我的js脚本

var div1 = document.getElementById("div1");
var first = document.getElementById("first");

first.addEventListener("click", function(e){
    alert("Hello");
    div1.innerHTML = div1.innerHTML + '<a id="second" href="#">Second</a>';
}, false);

当我点击#first链接时，第二个锚被插入＃div1，之后，如果我再试一次点击#first链接，则没有任何内容......

为什么会这样？

我创建了一个jsfiddle：http://jsfiddle.net/jkL7bomw/

Answer 1

当您直接操作HTML时，

first的事件不再存在（原始的#first被替换为新的#first）。更改DOM而不是HTML：

var a = document.createElement("a");
    a.href= "#";
    a.innerHTML = "Second";
    div1.appendChild(a);

http://jsfiddle.net/jkL7bomw/1/

除非您知道自己在做什么，否则切勿使用innerHTML添加/更改元素。

父修改后事件停止触发

1 个答案: