[Javascript] La fonction jQuery ne lie pas aux éléments dom nouvellement ajoutés


Answers

Vous devez utiliser un écouteur de clics "en direct", car initialement, seul l'élément unique existera.

$('.btn_test').live("click", function() { 
   alert('test'); 
});

Mise à jour: Puisque live est obsolète, vous devez utiliser "on ()":

$(".btn_test").on("click", function(){ 
   alert("test");
});

http://api.jquery.com/on/

Question

Voici index.html :

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function() {
      $('.btn_test').click(function() { alert('test'); });
    });

    function add(){
      $('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>');
    }

  </script>
</head>
<body>
  <a href="javascript:;" class="btn_test">test1</a>
  <a href="javascript:;" onclick="add()">add</a>
</body>

Si je clique sur le lien test1 , il affiche alert('test') , mais si je clique sur add lien puis sur test , cela ne montre rien.

Pourriez-vous l'expliquer?




$('.btn_test').click

ajoutera le gestionnaire pour les éléments qui sont disponibles sur la page (à ce stade 'test' n'existe pas!)

vous devez soit ajouter manuellement un gestionnaire de clic pour cet élément lorsque vous ajoutez, soit utiliser un gestionnaire d'événements en live qui fonctionnera pour chaque élément même si vous le créez ultérieurement.

$('.btn_test').live(function() { alert('test'); });



Lorsque le document est chargé, vous ajoutez des écouteurs d'événement à chaque classe correspondante pour écouter l'événement click sur ces éléments. Le même écouteur n'est pas ajouté automatiquement aux éléments que vous ajoutez au Dom plus tard.




C'est parce que vous cliquez sur événement est seulement lié à l'élément existant au moment de la liaison. Vous devez utiliser live ou delegate qui liera l'événement aux éléments existants et futurs de la page.

$('.btn_test').live("click", function() { alert('test'); });

Jquery en direct




.click se lie à ce qui est actuellement visible par jQuery. Vous devez utiliser .live:

$('.btn_test').live('click', function() { alert('test'); });



Ou lancez simplement le script à la fin de votre page