Ajax'ing Seiteninhalt; zuvor geklickt Link verhält sich nicht das gleiche Mal das zweite Mal nach dem Zurück Button Hit

Question

Ich erstelle eine Website, wo ich nahtlos zwischen den Seiten (wie eine App) Übergang wollte. Um dies zu tun, habe ich mich darauf festgelegt, den Inhalt, den ich von der angeforderten Seite benötige, mit einem Preloader dazwischen zu überbrücken. Ich habe den folgenden Code:

var url = ""; 
var historyUrl = ""; 

$('a').on('click', function(e){ 
    url = $(this).attr("href"); 
    historyUrl = window.location.pathname; 

    e.preventDefault(); 

    $('#wrap main').removeClass('active'); 

    $("#wrap main").load(url + " #wrap main", function (responseText, textStatus, XMLHttpRequest) { 
     if (textStatus == "success") { 

      setTimeout(function() { 
       $('#wrap main').addClass('active'); 
      }, 1000); 

      history.pushState(null, null, url); 

     } 
     if (textStatus == "error") { 
      // Error out 
     } 
    }); 

    e.stopPropagation(); 
}); 

$(window).on('popstate', function(){ 

    $('#wrap main').removeClass('active'); 

    $("#wrap main").load(historyUrl + " #wrap main", function (responseText, textStatus, XMLHttpRequest) { 
     if (textStatus == "success") { 
      setTimeout(function() { 
       $('#wrap main').addClass('active'); 
      }, 1000); 
     } 
     if (textStatus == "error") { 
      // Error out 
     } 
    }); 
}); 

Wie Sie sehen, ich bin Triggern auf alle a-Tags, um diese zu testen. Dieser Code funktioniert in den meisten Fällen gut. Wenn ich auf die erste Seite gehe und auf einen Link klicke, gehe ich erfolgreich auf die zweite Seite über, ohne dass der Browser neu geladen wird. Die URL ändert sich und der Verlauf wird verschoben. Wenn ich dann auf den Zurück-Button klicke, lande ich auch auf der ersten Seite.

Das Problem tritt danach auf; wenn ich dann fortfahre, auf denselben Link zu klicken, habe ich beim ersten Mal auf die erste Seite geklickt, wird die On-Click-Funktion ignorieren und einfach die zweite Seite als Standard-Browser laden.

Ich kann nicht herausfinden, warum das passieren würde. Ich denke, es hat etwas mit dem PushState zu tun, aber ich kann es nicht genau sagen.

Fehle ich etwas offensichtlich hier?

Dank

Answer 1

Wenn Sie Inhalte dynamisch laden, werden die Ereignisse nicht automatisch auf Elemente gebunden. Deshalb gibt es nach dem dynamischen Wechsel zurück zur ersten Seite keinen Event-Handler für den Klick auf den Link.

ändern

$('a').on('click', function(e){ 

zu

$(document).on('click', 'a', function(e){ 

und sollte es funktionieren.

Dadurch wird das Klickereignis in das Dokument verschoben (das sich nicht ändert), und die Rückruffunktion wird ausgeführt, wenn der Selektor im zweiten Argument ('a') mit dem Ereignisziel übereinstimmt.