chiamata jQuery quando succede qualcosa

Question

Così Sto usando jQuery Massoneria e voglio chiamare un po 'jQuery ogni volta che carica i messaggi:

function manipulate(id) { 
    $(id).each(function(){ 
    if($(this).height()>200){ 
     $('#container2').append(this); 
    } else{ 
     $('#container').append(this); 
    }; 
    }); 
}; 

quindi voglio chiamare questa funzione ogni volta che il prossimo elemento nella Carichi di container in muratura. In questo modo manipola l'oggetto nel modo corretto. Come lo faccio?

Aggiornamento: Descrizione della Massoneria

Massoneria è un Javascript collegare che è come carri CSS costretti ad adattarsi perfettamente lo scorrimento + infinito. Nasconde completamente tutto ciò che non sarebbe nella pagina 1 se non ci fosse uno scroll infinito, e poi li carica quando necessario. Ciò significa che la mia funzione non influenzerà nessuno degli oggetti nascosti e deve essere richiamata ogni volta che la Massoneria carica il prossimo set di oggetti in modo che appaiano nei posti giusti. Questo potrebbe significare che senza conoscere la Massoneria, non è necessariamente possibile per te risolvere il mio problema, ma puoi ancora. Alla fine, la massoneria "appende" gli oggetti al contenitore della Massoneria, quindi li "mostra". Quindi suppongo che quello che devo fare è aggiungerli ai contenitori corretti dopo che sono stati aggiunti al contenitore della Massoneria, ma prima che venga mostrato.

codice muratura:

$(window).load(function(){ 
    var $wall = $('#container'); 
    $wall.imagesLoaded(function(){ 
    $wall.masonry({ 
     itemSelector: '#entry, #entry_photo', 
     isAnimated : false 
    }); 
    }); 

    $wall.infinitescroll({ 
    navSelector : '#page-nav', 
    nextSelector : '#page-nav a', 
    itemSelector : '.entry, .entry_photo', 
    bufferPx  : 2000, 
    debug   : false, 
    errorCallback: function() { 
     $('#infscr-loading').fadeOut('normal'); 
    }}, 
    function(newElements) { 
     var $newElems = $(newElements); 
     $newElems.hide(); 
     $newElems.imagesLoaded(function(){ 
     $wall.masonry('appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');}); 
     }); 
    }); $('.entry').show(500); 
    }); 

Ho provato a mettere la funzione nei blocchi muratura e anche come la funzione $newElems per vedere se funzionerà quando più immagini di carico, ma non è così, in In effetti, in qualche modo lo spezza.

Come posso farlo funzionare tutti i nuovi elementi caricati da Massoneria attraverso la mia jQuery in modo che essi ottenere aggiunti al contenitore giusto?

Answer 1

Quindi, usando le cose dette nelle risposte fornite, mi sono incasinato e ho scoperto come è stato fatto ... quindi la parte 'appended' in imagesLoaded aveva solo bisogno di essere sostituita con la funzione! E 'stato davvero una risposta semplice ... ho solo dovuto sostituire questo:

$wall.masonry('appended', $newElems,{isAnimated: false}, 
function(){$newElems.fadeIn('slow');}); 

con questo:

$wall.masonry(manipulate($newElems) ,{isAnimated: false}, 
function(){$newElems.fadeIn('slow');}); 

Problema risolto!

Answer 2

Un'altra idea è associare un'azione a .on() di jQuery (http://api.jquery.com/on/). on() si lega anche agli elementi futuri, supponendo che siano correttamente collegati al DOM (ad esempio attraverso .append()). Quindi, ad esempio, puoi associare eventi .click() a elementi che non sono stati ancora creati.

Finalmente si può fare un trucco pulito e fare. append() attiva un evento. Quindi collega un gestore per quell'evento al grande contenitore dove vengono aggiunte le cose, quindi viene automaticamente chiamata una funzione. Ecco un buon esempio di questo on append() do something e un jsfiddle http://jsfiddle.net/rzRVu/

PS. in un sidenote, vedo che la funzione prende come input un ID, ma poi chiami .each(). L'id nel codice html dovrebbe essere unico.

Aggiornamento

. Ho perso il fatto che hai cercato di farlo correttamente attraverso la muratura, cosa si rompe esattamente? Vedo che stai chiamando .imagesLoaded() su una variabile jQuery, è un plugin?

Answer 3

È stata dichiarata solo un'istanza di muratura per container, container2 non ha un'istanza di muratura, quindi non può scorrere infinitamente nulla. Inoltre, ($(this).height()>200) sarà sempre falso se l'immagine non è ancora stata caricata, verrà impostata automaticamente su undefined -> 0 > 200, che è sempre falsa. O è necessario attendere che l'immagine venga caricata prima di posizionarla, o in qualche modo ottenere le dimensioni dell'immagine quando il contenuto viene caricato. Puoi nasconderla per impostazione predefinita e posizionarla in container, quindi su imagesloaded, controllare l'altezza e spostarla nel contenitore appropriato e mostrarla.