webentwicklung-frage-antwort-db.com.de

Jquery - Rückruf nach dem Anhängen ausführen

Ich füge Inhalte zu einer Liste hinzu mit:

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

Ich möchte weitere Funktionen für den angefügten Inhalt ausführen (Klasse ändern, Animationen anwenden usw.).

Wie kann ich mit dieser Funktion einen Rückruf durchführen, mit dem ich Funktionen für die angefügten Daten ausführen kann?

30
user342391

die Funktion .each() von jQuery nimmt eine Rückruffunktion und wendet sie auf jedes Element im jQuery-Objekt an.

Stellen Sie sich so etwas vor:

$('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 das Ergebnis auch einfach speichern und stattdessen daran arbeiten:

$('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 würde auch vorschlagen, anstatt das CSS so zu manipulieren, fügen Sie einfach eine Klasse zu Ihrem geklonten li hinzu:

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

Dann richten Sie einige Stile ein:

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

Leider kann das Hinzufügen von Rückrufen zu dom-Vorgängen nicht mit JavaScript auf nette Art und Weise erfolgen. Aus diesem Grund ist es nicht in der jQuery-Bibliothek enthalten. Ein Settimeout mit dem Timer "1ms" setzt die Funktion jedoch immer im Settimeout am unteren Rand des Callstacks. Das geht doch! Die Underscore.js-Bibliothek verwendet diese Technik in _.defer, die genau das macht, was Sie wollen.

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

Sie können einfach weitere Operationen am Semikolon verketten.

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

usw

4
Scott Evernden

In jquery können Sie $ () direkt nach dem anhängenden Inhaltscode verwenden. Auf diese Weise können Sie sicher sein, dass der Inhalt geladen ist und das DOM bereit ist, bevor Sie Aufgaben für den angefügten Inhalt ausführen.

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

$ () ruft eine Funktion auf, die entweder einen DOM-ready-Rückruf registriert (wenn eine Funktion an ihn übergeben wird) oder Elemente aus dem DOM zurückgibt (wenn eine Selektorzeichenfolge oder ein Element an sie übergeben wird)

Mehr finden Sie hier 
Differenz zwischen $ und $ () in jQuery
http://api.jquery.com/ready/

0
AJchandu