Discussion :

[thejocker9]

Bonjour à tous,

Je vous solicite car je suis face a un mystère que je ne comprend pas.
Voici le code exemple
HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  <div id="parent">
    <div id="enfant">Enfant</div>
  </div>

Le js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var enfant = document.getElementById('enfant');
var parent = document.getElementById('parent');
 
enfant.addEventListener('click', function(){
  alert();
}, false);
 
parent.innerHTML+='<div>ajout</div>';

Question : Pourquoi un innerHTML sur le parent fait sauté l'event sur l'enfant.
Je ne cherche pas de solutions, je cherche à comprendre pourquoi (spécificité du dom, des events, ....).
Merci par avance aux gens se penchant sur le problème.

Le code sur CodePen => http://codepen.io/anon/pen/PqEjXK

[melka one]

jour

quand on fait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

parent.innerHTML+='<div>ajout</div>';

sa revient au meme que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

parent.innerHTML=parent.innerHTML+'<div>ajout</div>';

tu copie le html du parent sans les evenements que tu ré-inserre avec le html suplementaire en écrasant l'ancien html

en gros tu remplace le html et les evenements associer par du html sans evenements

[thejocker9]

c'est bien se que je pensait, merci pour cette réponse rapide et éxplicite.