funzione di chiamata dopo .load (Jquery)

Question

Avendo un po 'di difficoltà a ottenere una funzione da chiamare dopo un .load:

$(function(){ 
    $('a.pageFetcher').click(function(){ 
     $('#main').load($(this).attr('rel')); 
    }); 
}); 

I pagina viene caricata, ma le funzioni non fare fuoco:

$(function(){ 
    var $container = $('#container'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector: '.box', 
    }); 
}); 
$container.infinitescroll({ 
    navSelector : '#page-nav', 
    nextSelector : '#page-nav a', 
    itemSelector : '.box', 
    loading: { 
     finishedMsg: 'Nothing else to load.', 
     img: 'http://i.imgur.com/6RMhx.gif' 
    } 
}, 
function(newElements) { 
    $.superbox.settings = { 
     closeTxt: "Close this", 
     loadTxt: "Loading your selection", 
     nextTxt: "Next item", 
     prevTxt: "Previous item" 
    }; 
    $.superbox(); 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    $newElems.imagesLoaded(function(){ 
     $newElems.animate({ opacity: 1 }); 
     $container.masonry('appended', $newElems, true); 
    }); 
} 
); 
}); 

Ho tentato di combinarli in modo che le seconde funzioni vengano richiamate dopo .load (dopo aver effettuato alcune ricerche su questo sito e guardando le risposte fornite/esempi) ma nulla sembra funzionare correttamente.

Suggerimenti?

Answer 1

Per eseguire un codice dopo le finiture .load(), è necessario inserire il codice in una funzione di completamento per .load(). L'operazione di caricamento è asincrona, quindi la funzione di caricamento avvia il caricamento del contenuto e quindi ritorna immediatamente e l'esecuzione di JS continua (prima che il caricamento sia completato). Quindi, se stai cercando di operare sui contenuti appena caricati, non sarà ancora lì.

Come il codice è stato scritto ora, hai due blocchi di codice che vengono eseguiti quando il documento HTML originale è pronto. Il primo blocco avvia un'operazione .load(). La seconda operazione si aspetta che lo .load() sia già fatto, ma non è ancora stato completato in modo che il contenuto dall'operazione .load() non sia ancora disponibile.

Ecco perché .load() accetta una funzione di completamento come argomento. Questa è una funzione che verrà chiamata al termine del caricamento. Vedi the relevant jQuery .load() doc per maggiori informazioni. Ecco come sarà il tuo codice con una funzione di completamento.

$(function(){ 
    $('a.pageFetcher').click(function(){ 
     $('#main').load($(this).attr('rel'), function() { 
      // put the code here that you want to run when the .load() 
      // has completed and the content is available 
      // Or, you can call a function from here 
     }); 
     // the .load() operation has not completed here yet 
     // it has just been started 
    }); 
}); 

Answer 2

Il tuo primo punto di riferimento deve essere sempre il jQuery API, ecco cosa il API page on .load() vi racconta i parametri della funzione di carico prende:

.load (gestore (eventObject))

.load ([eventData], handler (eventObject))

In questo caso, stai passando $(this).attr('rel') come l'EventData, in modo da aggiungere il gestore di eventi dopo che:

$('#main').load($(this).attr('rel'), onNewMainContent); 

Nel suo secondo blocco di codice, che stai dicendo jQuery per eseguirlo quando il tuo corpo carichi, non quando si caricano più nel tuo sito. È necessario eseguire in modo specifico, in modo da modificare l'inizio di quella funzione di:

function onNewMainContent { // new 
    var $container = $('#container'); 
    $container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.box', 
    // ... 

Answer 3

è anche possibile utilizzare il tasto di caricamento bootstrap per attivare la .load() e la funzione dopo .load()

HTML

<button type="button" class="btn btn-primary btn-lg" id="refresh" data-loading-text="<i class='fa fa-spinner fa-spin '></i>Processing">Reload Emails</button> 

jQuery

$("#refresh").click(function() { 

    var $this = $(this); 
    $this.button('loading'); 

    $("#container").load("/showemails.aspx?page=1 #container", function() { 
     $("#refresh").button('reset'); 
     }); 

    return false; 
    });