TUTOS.EU

Créer des éléments dynamiquement dans une page HTML avec jQuery


Imaginez que vous vouliez créer des objets/éléments/balises dynamiquement dans votre page web, et bien c'est possible avec jQuery !

Collez le code suivant dans https://www.tutorialspoint.com/online_html_editor.php

et vous verrez qu'à chaque fois que vous cliquez sur le bouton, un bloc de texte se crée :

<!DOCTYPE html>
<HTML lang="fr">
	<HEAD>
		<meta charset="utf-8" />
		<link href="style.css" rel="stylesheet" />
		<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>

	</HEAD>
	<BODY>

		<DIV id="mabaliseDIV">
			<INPUT id="butTest1" type="BUTTON" value="Test 1"><br />
		</DIV>

		<SCRIPT TYPE="text/javascript">

			$(function() {
			
				$n = 1;
				$("#butTest1").click(function() {
					//console.log( 'test');
					$("#mabaliseDIV").append( "<p id='baliseP"+ $n +"'>Balise "+$n+"</p>" );
					$n++;
				} );

			});	

		</script>		
		
	</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

Maintenant, sans manipulations supplémentaires, si vous ajoutez le code ci-dessous, vous verrez que rien ne se passe si on clic dessus.
Cela vient du fait que les balises <p> que l'on a créé dynamiquement n'ont aucun gestionnaire d’événement d'affecté.

$( "p[id*='baliseP']" ).click(function() {
	console.log( $(this).attr('id') );
	alert($(this).text());
} );
Lien vers le fichier : cliquez ici Copier le code

Par contre, si on utilise la fonction find() pour afficher le texte des balises p, là cela fonctionne. Voici le code du test complet à essayer

<!DOCTYPE html>
<HTML lang="fr">
	<HEAD>
		<meta charset="utf-8" />
		<link href="style.css" rel="stylesheet" />
		<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>

	</HEAD>
	<BODY>

		<DIV id="mabaliseDIV">
			<INPUT id="butTest1" type="BUTTON" value="Test 1"><br />
			<INPUT id="butTest2" type="BUTTON" value="Test 2"><br />			
		</DIV>

		<SCRIPT TYPE="text/javascript">

			$(function() {
			
				$n = 1;
				$("#butTest1").click(function() {
					//console.log( 'test');
					$("#mabaliseDIV").append( "<p id='baliseP"+ $n +"'>Balise "+$n+"</p>" );
					$n++;
				} );
				
				
				$("#butTest2").click(function() {
					//$("#mabaliseDIV").find('p').attr('src', 'https://www.tutos.eu/imagesarticles/3782animation.gif' );
					alert($("#mabaliseDIV").find('p').text());
					$n++;
				} );			

			});	

		</script>		
		
	</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

En fait ce post sur stackoverflow m'a permis de comprendre. Il faut ajouter un évènement de délégation.

Le principe est bien expliqué sur cet article du blog de François GUILLOT, en tout cas j'ai mieux compris qu'avec la page officielle de jQuery en Anglais !

Donc la solution, comme expliqué sur le post de stackoverflow, c'est d'acrocher un event aux objets qu'on ajoute. Cela se fait avec l'instruction 'On'

Exemple

$('#mabaliseDIV').on('click', '#baliseP'+$n+'', function() {
	mafonction(this);
});
Lien vers le fichier : cliquez ici Copier le code

Donc en plus d'ajouter un élément avec append, sur le même élément, on met un évènement click.
Et l'event consiste ici à appeler une fonction à qui on passe l'objet en paramètre

$n = 1;
$("#butTest1").click(function() {
	//console.log( 'test');
	$("#mabaliseDIV").append( "<p id='baliseP"+ $n +"'>Balise "+$n+"</p>" );
	$('#mabaliseDIV').on('click', '#baliseP'+$n+'', function() {
		mafonction(this);
	});		
	$n++;
} );
Lien vers le fichier : cliquez ici Copier le code

La fonction ici se contente d'afficher l'id de l'objet cliqué

function mafonction($monObj){
	alert($($monObj).attr('id') );
}
Lien vers le fichier : cliquez ici Copier le code

Le code complet donne

<!DOCTYPE html>
<HTML lang="fr">
	<HEAD>
		<meta charset="utf-8" />
		<link href="style.css" rel="stylesheet" />
		<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>

	</HEAD>
	<BODY>

		<DIV id="mabaliseDIV">
			<INPUT id="butTest1" type="BUTTON" value="Test 1"><br />
		</DIV>

		<SCRIPT TYPE="text/javascript">

			$(function() {
			
				$n = 1;
				$("#butTest1").click(function() {
					//console.log( 'test');
					$("#mabaliseDIV").append( "<p id='baliseP"+ $n +"'>Balise "+$n+"</p>" );
					$('#mabaliseDIV').on('click', '#baliseP'+$n+'', function() {
						mafonction(this);
					});		
					$n++;
				} );

				function mafonction($monObj){
					alert($($monObj).attr('id') );
				}

			});	

		</script>		
		
	</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

Testez vous même le code en le copiant sur
https://www.tutorialspoint.com/online_html_editor.php


2