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>
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());
} );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>
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);
});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++;
} );La fonction ici se contente d'afficher l'id de l'objet cliqué
function mafonction($monObj){
alert($($monObj).attr('id') );
}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>Testez vous même le code en le copiant sur
https://www.tutorialspoint.com/online_html_editor.php
