Gestion des Données Dynamiques avec jQuery

Objectif : Apprendre à générer, sélectionner et manipuler des données dynamiques dans le DOM avec jQuery

04 Janvier 2024 · 4 minutes de lecture

Les données dynamiques dans le contexte du développement web sont des informations qui changent et se mettent à jour en temps réel, sans avoir besoin de recharger la page entière. Cette approche rend les applications web plus interactives et réactives, améliorant considérablement l'expérience utilisateur.

Génération de Données Dynamiques

Ajout d'éléments à une liste en réponse à une action de l'utilisateur. Si vous cliquez sur Élément dynamique 1 ou Élément dynamique 2, vous aurez deux couleurs différentes.

                
                    <ul id="ma-liste">
                        <!-- Les éléments de la liste seront ajoutés ici -->
                    </ul>
                    <button class="btn btn-primary" id="ajouter-element">Ajouter un élément</button>

                    <script>
                        $(document).ready(function() {
                            // Fonction pour ajouter un nouvel élément à la liste
                            $("#ajouter-element").click(function() {
                                var nouvelElement = `
                                    <li>
                                        <span class="element-span-1">Élément dynamique 1</span>
                                        <span class="element-span-2">Élément dynamique 2</span>
                                    </li>
                                `;
                                $("#ma-liste").append(nouvelElement);
                            });

                            // Gestionnaires d'événements pour les éléments de liste cliqués
                            $(document).on("click", ".element-span-1", function() {
                                $(this).css({"color": "red"});
                            });
                            $(document).on("click", ".element-span-2", function() {
                                $(this).css({"color": "green"});
                            });
                        });
                    </script>
                
                

Lorsque vous travaillez avec des données générées dynamiquement dans jQuery, il est essentiel de comprendre la différence entre les méthodes de sélection directe et la délégation d'événements. Les éléments ajoutés dynamiquement au DOM après le chargement initial de la page ne sont pas pris en compte par les sélecteurs et les gestionnaires d'événements classiques.

            
                // Mauvaise pratique : ne fonctionne pas pour les éléments dynamiques
                $(".element-dynamique").click(function() {
                    // Code...
                });

                // Bonne pratique : délégation d'événements
                $(document).on("click", ".element-dynamique", function() {
                    // Code...
                });