innerHTML을 추가 한 후에 addEventListener가 사라졌습니다.

Question

좋아, 다음 javascript/greasemonkey를 사용하여 다음 html을 추가했습니다. (단지 샘플)

<ul> 
<li><a id='abc'>HEllo</a></li> 
<li><a id='xyz'>Hello</a></li> 
</ul> 

나는 또한 요소의 클릭 이벤트 리스너를 추가했습니다. 지금까지 모든 항목이 정상적으로 작동하므로 요소를 클릭하면 click 이벤트가 시작됩니다.

하지만 ... 나는 그것을 추가 즉, 특정 조건에 따라, 을 그 HTML을 수정하는 스크립트의 다른 기능을 가지고, 그래서 모양이 완료 될 때

<ul> 
<li><a id='abc'>Hello</a></li> 
<li><a id='xyz'>Hello</a></li> 
<li><a id='123'>Hello</a></li> 
</ul> 

하지만, 처음 두 요소에 대해 추가 한 청취자가 깨졌습니다. 내가 클릭하면 아무 일도 발생하지 않습니다.

내가 추가를 수행하는 함수에 대한 호출을 주석 처리하면 모두 다시 작동하기 시작합니다!

도와주세요 ...

Answer 1

당신이 설정 한 이전의 HTML을 덮어 쓰기하는 innerHTML 속성을 설정할 때마다.

element.innerHTML += '<b>Hello</b>'; 

이 요소 때문에 그들은 더 이상 존재하지 않는 부착 한,이 "분리 된"입니다 속성 HTML을 통해 연결된 모든 핸들러를 의미

element.innerHTML = element.innerHTML + '<b>Hello</b>'; 

작성과 동일하기 때문에, 연결 지정을 포함 , 새로운 요소 세트가 자리를 잡고 있습니다. 이전 이벤트 처리기를 모두 유지하려면 이전 HTML을 덮어 쓰지 않고 요소를 추가해야합니다.

var menu = pmgroot.getElementsByTagName("ul")[0]; 
var aEl = document.createElement("a"); 
aEl.innerHTML = "Hello"; 
aEl.id "123"; 
menu.appendChild(aEl); 

Answer 2

U는