web-dev-qa-db-fra.com

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 le lien test1, il affiche alert('test'), mais si je clique sur le lien add, puis sur test, il ne montre rien.

Pourriez-vous l'expliquer?

javascriptjqueryonclick
75
Ralsk28

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

207
Moshe Katz

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/

34
Doug Molineux

J'ai le même problème, comme question, j'étais juste sur le point de me tirer les cheveux, puis 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 dom) Maintenant, j'utilise 

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

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

merci @Moshe Katz

15
UFM

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

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

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

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

Edit: live() est obsolète et vous devriez plutôt utiliser on(). 

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

Cela est dû au fait que vous cliquez sur l'événement n'est lié à l'élément existant qu'au moment de la liaison. Vous devez utiliser live ou delegate pour lier l'événement aux éléments existants et futurs de la page.

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

Jquery Live

3
scrappedcola

vous avez besoin de auditeur en direct au lieu de cliquer:

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

La raison en est que la click affecte uniquement le listener aux éléments lors du chargement de la page. Tous les nouveaux éléments ajoutés n'auront pas cet auditeur sur eux. Live ajoute l'écouteur de clic à l'élément lors du chargement de la page et après leur ajout.

2
locrizak

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 ultérieurement au Dom.

1
shanethehat

Parce que l'événement est lié à chaque élément correspondant dans le document prêt. Tous les nouveaux éléments ajoutés NE SONT PAS automatiquement associés aux mêmes événements.

Vous devrez lier manuellement l'événement à tout nouvel élément après son ajout ou utiliser l'écouteur en direct.

1
Neil N
$('.btn_test').click

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

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

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

Après jquery 1.7 on peut utiliser la méthode et ça marche vraiment 

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
<script>
    $(document).ready(function(){
      $("p").on("click",function(){
       alert("The paragraph was clicked.");
       $("body").append("<p id='new'>Now click on this paragraph</p>");
    });
    $(document).on("click","#new",function(){
       alert("On really works.");
      });
    });
</script>
</head>
<body>
    <p>Click this paragraph.</p>
</body>
</html>

voyez-le en action http://jsfiddle.net/rahulchaturvedie/CzR6n/

1
Rahul

Vous devez ajouter une fonction de clic de bouton appropriée pour obtenir un résultat correct.

$("#btn1").live(function() { alert("test"); });
0
Salman Ashraf

Ou lancez simplement le script à la fin de votre page

0
Enigmax