Aufruf Funktion nach .load (JQuery)

Question

ein wenig Schwierigkeiten, die eine Funktion immer nach einer .load zu nennen:

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

die Seite geladen wird, aber die Funktionen nicht Feuer:

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

Ich habe versucht, sie so zu kombinieren, dass die 2. Funktionen nach .load aufgerufen werden (nach einigen Suchvorgängen auf dieser Seite und nach gegebenen Antworten/Beispielen), aber nichts scheint richtig zu funktionieren.

Vorschläge?

Answer 1

Um einen Code auszuführen, nachdem eine .load() beendet ist, müssen Sie den Code in eine Abschlussfunktion für die .load() setzen. Die Ladeoperation ist asynchron, also startet die Ladefunktion das Laden des Inhalts und kehrt dann sofort zurück und Ihre JS-Ausführung wird fortgesetzt (bevor der Ladevorgang abgeschlossen ist). Wenn Sie also versuchen, den neu geladenen Inhalt zu bearbeiten, ist er noch nicht da.

Da Ihr Code jetzt geschrieben wird, haben Sie zwei Codeblöcke, die beide ausgeführt werden, wenn das ursprüngliche HTML-Dokument bereit ist. Der erste Block startet eine .load() Operation. Die zweite Operation erwartet die .load() bereits getan, aber es ist noch nicht abgeschlossen, so dass der Inhalt der .load() Operation noch nicht verfügbar ist.

Deshalb .load() nimmt eine Abschlussfunktion als Argument. Das ist eine Funktion, die aufgerufen wird, wenn der Ladevorgang abgeschlossen ist. Weitere Informationen finden Sie unter the relevant jQuery .load() doc. Hier sehen Sie, wie Ihr Code mit einer Vervollständigungsfunktion aussehen würde.

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

Ihr erster Bezugspunkt sollte immer die jQuery API, hier ist es, was die API page on .load() informiert Sie über die Parameter der Ladefunktion nimmt:

.load (Handler (event))

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

In diesem Fall übergeben Sie $(this).attr('rel') als eventdata, so dass Sie Ihren Event-Handler nach hinzufügen, dass:

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

In Ihrem zweiten Block von Code, sind Sie jQuery zu sagen, es auszuführen, wenn Ihre Körper Lasten, nicht, wenn Sie mehr laden in Ihre Website. Sie müssen es speziell auszuführen, so den Start dieser Funktion zu ändern:

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

Answer 3

Sie auch Bootstrap-Laden-Taste verwenden, um die .load() und die Funktion nach .load()

HTML auslösen

<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; 
    });