JQuery - Führen Sie nach dem Rückruf

Question

anhängen I Inhalt auf eine Liste am anhängt mit:

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

ich weitere Funktionen auf die beigefügte Inhalt ausführen möchten (ändern Klasse gelten Animationen usw.)

Wie kann ich einen Callback für diese Funktion ausführen, mit dem ich Funktionen für die angehängten Daten ausführen kann?

Answer 1

jQuery .each() ist nimmt eine Rückruffunktion und wendet sie auf jedes Element in dem Objekt jQuery.

etwas wie folgt vorstellen:

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

Sie können auch das Ergebnis nur speichern und arbeiten daran statt:

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

ich auch, dass stattdessen vorschlagen würde, wie die CSS von mofiying, dass Sie nur Fügen Sie eine Klasse zu Ihrer geklonten li wie folgt hinzu:

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

Dann richten Sie einige Stile wie:

Answer 2

Sie können einfach weitere Operationen am Semikolon verketten.

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

etc

Answer 3

Leider ist das Hinzufügen von Rückrufen zu Dom-Operationen nicht etwas, das in einer ordentlichen Art und Weise mit Javascript getan werden kann. Aus diesem Grund ist es nicht in der jQuery-Bibliothek. Ein settimeout mit dem Timer "1ms" setzt die Funktion jedoch immer in das settimeout am unteren Ende des Callstacks. Das funktioniert! Die Bibliothek "underscore.js" verwendet diese Technik in _defer, was genau Ihren Vorstellungen entspricht.

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