2010-12-14 55 views
12

J'ai généré des liens html avec jQuery et je l'ai ajouté à certains div mais il semble que je ne puisse pas appeler la méthode click maintenant, quand ces éléments sont ajoutés (ça marchait bien quand ils étaient codés en dur dans html) $('#something a').click(function() ...jQuery cliquez sur les éléments ajoutés

Est-ce que quelqu'un connaît une solution pour cela?

Répondre

21

Utilisez .delegate() pour ces cas:

$('#something').delegate('a', 'click', function() { 

Ce joint un gestionnaire click sur #something, plutôt que la direction des <a> éléments à l'intérieur ... donc il fonctionne sur les ancres jointes plus tard. L'alternative (pire pour quelques raisons) version est .live() comme ceci:

$('#something a').live('click', function() { 
+0

@ Nick - pourquoi utilise en direct pire? Juste curieux parce que je l'utilise beaucoup. – Josh

+0

@Nick - pourriez-vous s'il vous plaît commenter les raisons pour lesquelles .live() est pire - je suis vraiment intéressé. À votre santé! –

+4

@Josh, @Jakub - Avec '.live()', prenons le code ci-dessus - le sélecteur '$ ('# quelque chose a')' est lancé immédiatement, mais nous ne nous soucions pas de ce qu'il a trouvé ... le résultat est gaspillé. De plus, comme il est attaché à 'document', * chaque * clic doit être vérifié par rapport à ce sélecteur. Avec '.delegate()', seul le sélecteur '$ ('# quelque chose')' très rapide est exécuté, et nous utilisons le résultat. Aussi, seuls les clics depuis '#quelque chose 'doivent être vérifiés, puisqu'ils sont vérifiés chez ce parent, donc' .delegate() 'adresse 2 raisons de performance ... avec un sélecteur plus cher, les gains sont encore plus importants. –

0

vous devez utiliser la fonction en direct pour vous assurer que l'événement click se binded aux éléments qui ont été ajoutés au DOM après la page a été chargé:

$('#something a').live('click',function() ..... 
+0

fonctionne bien, merci1 – Dejan

4

Ce qui fonctionne aussi est d'ajouter le [cliquez] événement lors de l'ajout des éléments, comme ceci:

$('<someElement>').click(function(){ 
    $('<someElement>').append('<htmlCodeToAppend>'); 
    $('<appendedElement>').click(function() { /* do something */ }); 
}); 

Cette approche fait le travail, mais je ne suis pas sûr f il y a des mises en garde - peut-être que l'un des pros pourrait bien intervenir ici.

Cheers, Erik