事件停止射击父修改

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

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

为什么这样？

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

Answer 1

first的事件已经不存在了（原来#first被替换为新的#first），当你直接操作HTML。改变DOM，而不是HTML的：

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

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

决不添加/更改元素与innerHTML除非你知道自己在做什么。