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

juillet 1, 2019février 10, 2020 Amine KOUIS Aucun commentaire

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

Résultat

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