Jquery - Eseguire richiamata dopo accodare

Question

sto aggiungendo contenuti a un elenco utilizzando:

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

voglio svolgere ulteriori funzioni al contenuto aggiunto (classe cambiamento, applicare le animazioni ecc)

Come posso eseguire una richiamata su questa funzione che mi consentirà di eseguire funzioni sui dati aggiunti?

Answer 1

jQuery .each() prende una funzione di callback e lo applica ad ogni elemento nell'oggetto jQuery.

Immaginate qualcosa di simile:

$('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'}); 
    }); 
}); 

Si potrebbe anche solo memorizzare il risultato e lavorare su di esso, invece:

$('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'}); 
}); 

Vorrei anche suggerire che invece di mofiying il CSS come quello appena aggiungi una classe al tuo Li clonato in questo modo:

Quindi imposta alcuni stili come:

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

Answer 2

È possibile continuare a concatenare ulteriori operazioni al punto e virgola.

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

ecc

Answer 3

Sfortunatamente l'aggiunta di callback alle operazioni dom non è qualcosa che può essere fatto in modo pulito usando javascript. Per questo motivo non è nella libreria jQuery. Un settimeout con il timer "1ms", tuttavia, mette sempre la funzione nel settimeout nella parte inferiore della pila di chiamate. Questo funziona! La libreria underscore.js utilizza questa tecnica in _.defer, che fa esattamente quello che vuoi.

$('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); 
});