[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 au départ, 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?




Ou lancez simplement le script à la fin de votre page




$('.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'); });



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

$('.btn_test').live('click', 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




Related