web-dev-qa-db-fra.com

Jquery - Effectue un rappel après l'ajout

J'ajoute du contenu à une liste en utilisant:

  $('a.ui-icon-cart').click(function(){
         $(this).closest('li').clone().appendTo('#cart ul');
  });

Je veux effectuer d'autres fonctions sur le contenu ajouté (changer de classe, appliquer des animations, etc.)

Comment puis-je effectuer un rappel sur cette fonction qui me permettra d'exécuter des fonctions sur les données ajoutées?

jquerycallbackappendlive
30
user342391

la fonction .each() de jQuery prend une fonction de rappel et l'applique à chaque élément de l'objet jQuery.

Imaginez quelque chose comme ça:

$('a.ui-icon-cart').click(function(){
  $(this).closest('li').clone().appendTo('#cart ul').each(function() {
    $(this).find('h5').remove(); 
    $(this).find('img').css({'height':'40px', 'width':'40px'});
    $(this).find('li').css({'height':'60px', 'width':'40px'});
  });
});

Vous pouvez également simplement stocker le résultat et y travailler à la place:

$('a.ui-icon-cart').click(function(){
  var $new = $(this).closest('li').clone().appendTo('#cart ul')
  $new.find('h5').remove(); 
  $new.find('img').css({'height':'40px', 'width':'40px'});
  $new.find('li').css({'height':'60px', 'width':'40px'});
});

Je suggérerais également qu'au lieu de modifier le CSS comme cela, vous ajoutez simplement une classe à votre li cloné comme ceci:

$(this).closest('li').clone().addClass("new-item").appendTo('#cart ul');

Puis configurez des styles comme:

.new-item img, .new-item li { height: 40px; width: 40px; }
.new-item h5 { display: none }
26
gnarf

Malheureusement, l’ajout de callbacks aux opérations dom n’est pas réalisable avec javascript. Pour cette raison, il ne se trouve pas dans la bibliothèque jQuery. Une settimeout avec la minuterie "1ms" place toutefois toujours la fonction dans la settimeout au bas de la pile d'appels. Ça marche! La bibliothèque underscore.js utilise cette technique dans _.defer, qui fait exactement ce que vous voulez.

$('a.ui-icon-cart').click(function(){
    $(this).closest('li').clone().appendTo('#cart ul');
    setTimeout(function() {
        // The LI is now appended to #cart UL and you can mess around with it.
    }, 1);
});
15
douwe

Vous pouvez simplement continuer à enchaîner les opérations au point-virgule.

$(this).closest('li').clone().appendTo('#cart ul').addClass('busy').fade('fast');

etc

4
Scott Evernden

Dans jQuery, vous pouvez utiliser $ () juste après votre code de contenu ajouté. De cette façon, vous pouvez être sûr que le contenu est chargé et que le DOM est prêt avant d'exécuter des tâches sur le contenu ajouté.

$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});

$ () appelle une fonction qui enregistre un rappel prêt pour le DOM (si une fonction lui est transmise) ou renvoie des éléments du DOM (si une chaîne ou un élément de sélecteur lui est passé)

Vous pouvez trouver plus ici 
différence entre $ et $ () dans jQuery
http://api.jquery.com/ready/

0
AJchandu