2010-06-24 7 views
30

sto aggiungendo contenuti a un elenco utilizzando:Jquery - Eseguire richiamata dopo accodare

$('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?

risposta

26

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 } 
+0

Hmm ... il secondo esempio continuerebbe a sparare in modo asincrono e non funzionerebbe nella maggior parte dei casi quando avevano bisogno che il callback si verificasse * dopo * l'appendice – Trip

+0

Non sono sicuro di capire cosa significa asynch @Trip --- Tutto ciò il codice sopra è la sincronizzazione. Non ci sono chiamate asincrone in questo codice. Anche il callback all'interno di ciascuno è ancora sincronizzato, viene chiamato immediatamente. L'unica differenza in entrambi gli esempi è che il primo crea un nuovo ambito all'interno di ciascuno che è possibile memorizzare variabili per ciascun elemento abbinato, altrimenti dovrebbero funzionare in modo identico. – gnarf

+1

Ho sbagliato! Grazie :) – Trip

4

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

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

ecc

+2

Come faccio a implementare questo in una catena:. $ (this) .find ('H5') rimuovere(); \t \t \t $ (this) .find ('img'). Css ('height', '40px', 'width', '40px'); \t \t \t $ (this) .find ('li'). Css ('height', '60px', 'width', '40px'); – user342391

+1

Questo non aiuta, la domanda è come è possibile applicare un callback dopo l'operazione di aggiunta viene eseguita. Le operazioni DOM vengono eseguite in modo asincrono. Quindi nella parte successiva della catena il contenuto aggiunto non è ancora visibile. – douwe

16

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); 
}); 
+2

Le operazioni DOM sono sincronizzate, non c'è motivo di '_.defer' nulla – gnarf

+0

Grazie, è esattamente ciò di cui avevo bisogno! Il mio caso è stato accodare l'entità html a un contenitore, piuttosto che associarlo a un evento. Ho faticato a farlo funzionare per un po '... –

+0

Fantastico! Non è la soluzione più ovvia in cui mi sono imbattuto, ma funziona :-) – bestprogrammerintheworld

Problemi correlati