Comment lier un évènement click à un élément HTML créé de façon dynamique – jQuery

Si vous essayez de lier les éléments qui sont dynamiquement ajoutés au DOM en utilisant la méthode click() de jQuery, cela ne fonctionnera pas, car il ne lie l’événement click qu’aux éléments qui existent au moment du « binding ». Pour lier l’événement click à tous les éléments existants et futurs éléments, utilisez la méthode on() de jQuery. voir l’exemple suivant.
 
 

Code HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lier un évènement click à un élément HTML</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
		  // Mettez le code jQuery ici.
    </script>
  </head>
  <body>
    <p>Cliquez sur le bouton ci-dessous pour ajouter dynamiquement de nouveaux éléments. Vous pouvez l'enlever plus tard.</p>
    <button>+ Ajouter</button>
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </body> 
</html>

 

Code jQuery:
$(document).ready(function() {
    //Ajouter l'élément
    $("button").click(function() {
        $("ul").append("



 	
  • Lorem Ipsum ×
  • "); }); //Supprimer l'élément $(document).on("click", "a.delete", function() { $(this).parent().remove(); }); });
    Résultat

    Cliquez sur le bouton ci-dessous pour ajouter dynamiquement de nouveaux éléments. Vous pouvez l'enlever plus tard.

    • Lorem Ipsum
    • Lorem Ipsum
    • Lorem Ipsum
    QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
    Partagez cet article

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *