Loading HTML-Datei, Javascript verschwindet

Question

Ich änderte das Menü auf meiner Website, so ersetzt es den Hauptinhalt auf meiner Seite mit HTML-Dateien mit jquery statt nur href-ing die HTML-Seiten. Etwas wie:

$(function() { 
    $('.new_page_title').on('click', function (e) { 
     e.preventDefault(); 
     $('.main_content').load('new_page.html'); 
     $('body').scrollTop(0); 
    }); 
}); 

Für eine meiner Seiten möchte ich einen rotierenden Satz haben, der zufällig aus einem Array ausgewählt wird. Vor, ich tat es nur beim Laden der Seite, aber jetzt habe ich eine Zeile in der obigen Funktion hinzugefügt, um die randomizer zu nennen, die wie folgt aussieht:

function make_a_sentence() { 
     var sentenceArray = [ 
      'digging holes in the back yard', 
      'eating our vegetables', 
      'doing something important', 
      'building the future', 
      'watering my plants', 
      'propogating succulents', 
      'watching Call the Midwife', 
      'looking outside and dreaming of salvation', 
      'poopin\'', 
      'providing for my family', 
      'watching you through your window', 
      'digging around craigslist', 
      'rotating my tires', 
      'settling lawsuits' 
     ]; 

     var selected = Math.floor(sentenceArray.length * Math.random()); 
     $("#id_of_div").html(sentenceArray[selected]); 
} 

Und dann ruft make_a_sentence() am Ende der Klick-Funktion . Wenn ich nur die Seite lade, wird der Satz nicht angezeigt, und wenn ich debugge, fügt er den Satz in das div ein, bis es das Ende des Fehlers erreicht und dann verschwindet der Satz. Irgendwelche Ideen?

Answer 1

Die load Funktion ist asynchron, müssen Sie Code abhängig von der geladenen Seite Inhalt in load ‚s Rückruf laufen (sonst wird Ihre Änderungen überschrieben, sobald sie auftreten, bevor die Last abgeschlossen ist), wie:

$(function() { 
    $('.new_page_title').on('click', function (e) { 
    e.preventDefault(); 
    $('.main_content').load('new_page.html', function() { 
     $('body').scrollTop(0); 
     make_a_sentence() 
    }); 
    }); 
}); 

Siehe jQuery.load als Referenz.