75 votes

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

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 test1 lien, il montre alert('test') , mais si je clique sur add lien , puis cliquez sur test , il n » Ne rien montrer.

Pourriez-vous l'expliquer?

211voto

Moshe Katz Points 3466

Pour les utilisateurs qui abordent cette question après 2011, il existe une nouvelle manière de procéder:

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

C'est à partir de jQuery 1.7.

Pour plus d'informations, voir Événements directs et délégués

34voto

Doug Molineux Points 3096

Vous devez utiliser un écouteur de clic "live", car initialement, seul l'élément unique existera.

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

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

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

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

15voto

UFM Points 186

J'ai le même problème comme question J'étais juste près de tirer mes cheveux alors j'ai eu la solution. J'utilisais une syntaxe différente

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

cela ne fonctionnait pas pour moi (innerImage est créé dynamiquement par le dom) Maintenant, j'utilise

 $(document).on('click', '.innerImage', function() { alert('test'); });
 

http://jsfiddle.net/SDJEp/2/

merci @Moshe Katz

8voto

drwelden Points 4263

.click est lié à ce qui est actuellement visible pour jQuery. Vous devez utiliser .live:

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

7voto

Amir Raminfar Points 17939

Utilisez Jquery live à la place. Voici la page d'aide pour cela http://api.jquery.com/live/

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X