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 Ajax !

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

Maintenant, sans manipulations supplémentaires, si vous ajoutez le code ci-dessous pour que le texte s'affiche dans un popup quand on clic dessus, vous verrez qu'il ne fonctionne pas. 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

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

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 en fait, 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

Donc en plus d'ajouter un élément avec append, en plus, sur le même élément ajouté, on colle ici un évent à déclencher sur un clic.
Et l'event ici consiste à 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

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

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

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