Содержание страницы Ajax'ing; ранее нажатая ссылка не ведет себя одинаково во второй раз после того, как обратная кнопка нажата

Question

Я создаю веб-сайт, на котором я хотел бы легко переходить между страницами (например, приложение). Для этого я решил использовать ajax-содержимое, которое мне нужно с запрашиваемой страницы, с предварительным загрузчиком между ними как транзистором. У меня есть следующий код:

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

Как вы можете видеть, я запуск на всех бирке, чтобы проверить это. Этот код работает отлично по большей части. Если я перейду на первую страницу и перейду по ссылке, я успешно перейду на вторую страницу без перезагрузки браузера. URL-адрес изменяется, и история нажата. Если я затем нажмите кнопку «Назад», я тоже вернусь на первую страницу.

Проблема возникает после этого; если я затем перейду к одной и той же ссылке, я нажал первую страницу в первый раз, она проигнорирует функцию щелчка и просто загрузит вторую страницу в качестве стандартного браузера.

Я не могу понять, почему это произойдет. Я думаю, что это что-то связано с pushState, но я не могу на это наложить свой палец.

Я пропустил что-то очевидное здесь?

Благодаря

Answer 1

Когда вы динамически загружать контент, события не автомагически связаны с элементами. Вот почему после динамического перехода на первую страницу нет обработчика событий для клика по ссылке.

Изменить

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

в

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

и он должен работать.

Это отклоняет событие клика к документу (который не изменяется) и выполняет функцию обратного вызова, если селектор во втором аргументе ('a') соответствует цели события.