addEventListener disparu après avoir ajouté innerHTML

Question

Ok, donc j'ai ajouté le code html suivant à un site utilisant javascript/greasemonkey. (juste échantillon)

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

et je l'ai aussi ajouté un écouteur d'événement de clic pour les éléments. Tout fonctionne bien jusqu'à présent, l'événement click est déclenché lorsque je clique sur l'élément.

Mais ... j'ai une autre fonction dans le script, qui, après une certaine condition, modifie que html, -à-dire qu'il ajoute, donc il ressemble à:

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

mais quand cela est fait, ça brise les auditeurs j'ai ajouté pour les deux premiers éléments ... rien ne se passe quand je les clique.

Si je commente l'appel à la fonction qui fait l'ajout, tout recommence à fonctionner!

aide s'il vous plaît ...

Answer 1

Chaque fois que vous définissez la propriété innerHTML vous écrasez un code HTML précédent qui a été mis là. Cela comprend l'affectation de concaténation, parce que

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

est le même que l'écriture

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

Cela signifie que tous les gestionnaires ne sont pas rattachés via les attributs HTML seront « détachés », puisque les éléments qu'ils étaient attachés à ne plus exister et un nouvel ensemble d'éléments a pris leur place. Pour conserver tous vos gestionnaires d'événements précédents, vous devez ajouter des éléments sans écraser le code HTML précédent. La meilleure façon de le faire est d'utiliser les fonctions de création DOM telles que createElement et appendChild:

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

Answer 2

U peut également utiliser la fonction « live » jQuery