2016-06-03 17 views
0

Ich benutze Isotope für seine erstaunliche Layout-Funktionen, ich habe einen Anruf, der neue Elemente über Ajax abruft, das entfernt die alten Elemente und fügt die neuen hinzu. Die Animation sieht sehr gut aus, aber ich kann nicht zurückrufen, um an der Animation zu arbeiten.Isotop Ereignisse nicht feuern

Ich versuche, diese auf ihrer Website aus ihrer Dokumentation zu nutzen:

das funktioniert für mich nicht nur

jedoch

$grid = $('#grid').isotope({ 
     itemSelector: '.item' 
}); 

$grid.on('arrangeComplete', function(){ 
    console.log('arrangeComplete') 
}); 
:

$grid.on('arrangeComplete', onArrange); 

ich es auf diese Weise umgesetzt habe. Das Ereignis wird nie ausgelöst.

Ich habe zwei Funktionen zum Entfernen und das Voranstellen der neuen Elemente:

//Remove 
$grid.isotope('remove', removeItems); //removeItems being a var this works fine 

//Add 
$grid 
    .prepend(assets) 
    .isotope('appended', assets) 
    .isotope('reloadItems') 
    .isotope({sortby: 'original-order'}); 
//again this all works fine 

Ich bin nicht sicher, ob ich das falsche Ereignis für den Abschluss der Animation verwenden, aber die Mühe, die ich habe, ist, dass keiner von sie scheinen zu schießen.

Im Moment habe ich einen Hack anstelle:

$grid.bind("transitionend", function(){ 

Der Hack funktioniert, aber seine seine Veranstaltung am Ende jedes Elements Übergang Brennen, die auf Mittel abhängig, wie viele Elemente auf der Seite es wird Feuer für alle ihre Übergänge zu entfernen, und dann alle Übergänge für die nächsten Elemente wird vorangestellt. Das ist offensichtlich ein Problem für mich.

Jede Hilfe oder Hinweise zu diesem Thema würde sehr geschätzt werden.

+0

Haben Sie Ihren Code in eine 'function() {}' oder DOM ready gepackt? –

+0

Ja, sie sind alle in separate Funktionen zum Löschen, Hinzufügen und natürlich zum Initialisieren der Instanz aufgeteilt. Es ist in der Initialisierung, dass ich tatsächlich die '.on ('arrangeComplete' ...' – ThePagan

+0

Ich meine dies: '$ (Dokument) .ready ({$ grid.isotope ({...})})' –

Antwort

0

In der Vergangenheit hatte ich Probleme mit der reloadItems Methode nicht feuern, verursacht dynamisch hinzugefügte Elemente in der oberen rechten Ecke zu stapeln. Aus irgendeinem Grunde scheint es die folgende Art und Weise Aufruf zu arbeiten:

$grid.isotope('reloadItems').isotope(); 

Ich habe keine Ahnung, warum der zweite .isotope() ist notwendig - vielleicht jemand anderes erklären könnte.

+0

Es gibt eine Beschreibung vom Plugin Autor hier (obwohl es ein paar Jahre alt ist): https://github.com/metafizzy/isotope/issues/238 –