Jquery - Effectuer le rappel après append

Question

Je suis content ajout à une liste à l'aide:

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

Je veux effectuer d'autres fonctions au contenu en annexe (classe du changement, appliquer des animations, etc.)

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

Answer 1

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

Imaginez quelque chose comme ceci:

$('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 aussi simplement stocker le résultat et le travail sur elle à 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ère également qu'au lieu de mofiying le CSS comme vous venez ajoutez une classe à votre li cloné comme ceci:

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

Ensuite, installez des styles comme:

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

Answer 2

Vous pouvez continuer à enchaîner d'autres opérations au point-virgule.

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

etc

Answer 3

Unfortunatly ajoutant callbacks aux opérations dom est pas quelque chose qui peut être fait de façon soignée en utilisant javascript. Pour cette raison, il ne figure pas dans la bibliothèque jQuery. Un settimeout avec la minuterie "1 ms" met toujours la fonction dans le settimeout au bas de la pile d'appels. Cela fonctionne! 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); 
});