Exécution d'une fonction à chaque déclenchement d'un événement [Résolu]

kéraunos · 15/06/2011, 18h57

Bonjour.

Avec le code ci-dessous, lorsqu'on clique sur la div #div1, une boîte alert apparaît et 5 div sont générées sur la page.

La génération des div se fait par l'intermédiaire de la function funcTest().

Au premier clic sur #div1, tout fonctionne. Mais aux suivants, plus rien ne fonctionne pour moi. Testé sur 4 navigateurs (or IE).

Est-ce que ce code génère le même comportement chez vous ?
Comment faire en sorte de pouvoir exécuter funcTest() autant de fois que l'on clique sur #div1 ?

Merci.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!doctype html> 
<html lang="fr"> 
 
<head> 
	<meta charset="utf-8" /> 
	<title>sans titre</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style>
		html, body, div {
			margin: 0;
			padding: 0;
		}
		#div1 {
			width: 100px;
			height: 100px;
			background: blue;
		}
	</style>
</head> 
 
<body>
 
	<div id="div1">Click</div>
 
	<script type="text/javascript">
 
		var div1 = document.getElementById('div1');
 
		function funcTest() {
			for(var i=0; i<5; i++) {
				document.body.innerHTML += '<div>test</div>';
			}
		}
 
		div1.addEventListener('click', function(e) {
			alert('ok');
			funcTest();
		}, false);
 
	</script>
</body>

Bovino · 15/06/2011, 19h19

C'est effectivement un classique de innerHTML. Etant donné que tu remplace le contenu du body par une chaine, l'affichage se passe bien, mais tu perds les méthodes appliquées au DOM.
La solution est de passer par une fonction manipulant uniquement le DOM :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctype html> 
<html lang="fr"> 
 
<head> 
	<meta charset="utf-8" /> 
	<title>sans titre</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style>
		html, body, div {
			margin: 0;
			padding: 0;
		}
		#div1 {
			width: 100px;
			height: 100px;
			background: blue;
		}
	</style>
</head> 
 
<body>
 
	<div id="div1">Click</div>
 
	<script type="text/javascript">
 
		var div1 = document.getElementById('div1');
 
		function funcTest() {
			var newDiv;
			for(var i=0; i<5; i++) {
				newDiv = document.createElement('div');
				newDiv.appendChild(document.createTextNode('test'));
				document.body.appendChild(newDiv);
			}
		}
 
		div1.addEventListener('click', function(e) {
			alert('ok');
			funcTest();
		}, false);
 
	</script>
</body>

kéraunos · 15/06/2011, 21h18

Ah ok... Merci.

Et cette perte des méthodes avec body.innerHTML, elle se retrouve de la même manière quel que soit l'élément HTML dont on remplace le contenu, ou c'est spécifique à certains éléments ?

--

Et une question subsidiaire me taraude: en observant ton code, je remarque l'absence du mot-clé var lors de la définition des variables. Son utilisation n'est donc pas nécessaire ? N'est-elle que souhaitable ? Et pourquoi ?

---

Bovino · 15/06/2011, 21h25

A priori, c'est le cas pour tous les éléments, mais en sachant que cela n'affecte que ceux qui sont modifiés et uniquement sur certaines propriétés et / ou méthodes.
Par exemple, si tu modifies une div avec innerHTML, cela ne devrait pas avoir d'impact sur les éléments en dehors de cette div.

15/06/2011, 21h25	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 803 Points : 35 803	A priori, c'est le cas pour tous les éléments, mais en sachant que cela n'affecte que ceux qui sont modifiés et uniquement sur certaines propriétés et / ou méthodes. Par exemple, si tu modifies une div avec innerHTML, cela ne devrait pas avoir d'impact sur les éléments en dehors de cette div. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

15/06/2011, 21h18	#3
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Ah ok... Merci. Et cette perte des méthodes avec body.innerHTML, elle se retrouve de la même manière quel que soit l'élément HTML dont on remplace le contenu, ou c'est spécifique à certains éléments ? -- Et une question subsidiaire me taraude: en observant ton code, je remarque l'absence du mot-clé var lors de la définition des variables. Son utilisation n'est donc pas nécessaire ? N'est-elle que souhaitable ? Et pourquoi ? ---
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email