событий прекратить огонь после того, как родитель модифицирована

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 «s событие больше не существует (оригинал #first заменяется новым #first), когда вы манипулировать HTML непосредственно. Изменение DOM вместо HTML:

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

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

Никогда не добавляйте/элементы изменения с innerHTML, если вы не знаете, что вы делаете.