Création dynamique d'eventListeners
Résolu
filtep
-
filtep -
filtep -
Bonjour,
je cherche à créer dynamiquement des eventListeners sur les éléments du DOM (ici des boutons) eux même créés dynamiquement.
Seul le dernier bouton 'garde' l'eventListener et je ne comprends pas pourquoi ? Certainement une histoire de variables mais... un peu d'aide ma serait grandement utile.
Merci d'avance
Philippe
je cherche à créer dynamiquement des eventListeners sur les éléments du DOM (ici des boutons) eux même créés dynamiquement.
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="charge()";>
</body>
<script type="text/javascript">
function charge(){
for(x=0; x<5; x++){
var nouv_text="<button id='btn_" + x + "'>Bouton " + x + "</button><br>";
document.body.innerHTML=document.body.innerHTML + nouv_text
document.getElementById('btn_'+x).addEventListener('click', function(){alert(this.id);});
}
}
</script>
</html>
Seul le dernier bouton 'garde' l'eventListener et je ne comprends pas pourquoi ? Certainement une histoire de variables mais... un peu d'aide ma serait grandement utile.
Merci d'avance
Philippe
3 réponses
-
Bonjour,
Le problème c'est que tu réécris le contenu ( les boutons ) à chaque itération.
Sauf que l'addevent n'existe plus au moment ou tu recréés les boutons.
Pour le faire proprement, voici :
function charge(){ for(x=0; x<5; x++){ var btn = document.createElement("BUTTON"); btn.id = 'btn_'+x; btn.innerHTML = 'btn_'+x; document.body.appendChild(btn); btn.addEventListener('click', function(){alert(this.id);}); var br = document.createElement("BR"); document.body.appendChild(br); } }
-
Merci beaucoup Jordane45,
ta solution fonctionne parfaitement mais je ne comprends pas ce qui ne va pas dans mon code initial. C'est le:
" document.body.innerHTML=document.body.innerHTML + nouv_text "
qui pose problème parce que ça recrée tous les boutons sans leur evenListener, c'est çà ? -
