javascript - AJAXナビゲーションにpopStateを戻す方法は?

Question

AJAX ナビゲーションを作成しようとしていて、popState で問題が発生しています。以下は、pageName を pushStates する関数です (指定された div を content.html から .mainwrap にもロードします)。URL を解析して何をロードするかを決定する自己呼び出し関数があり、その中に popstate イベント ハンドラーがあります。最後に、要素を「ajax化」するための data-page 属性を持つ要素のクリック ハンドラーです。これについてどうやって間違っているのですか？

function loadPageContent(pageName){
  $('.mainwrap').animate({opacity: 0}, 250, function(){
    $(this).empty();
    $(this).load('content.html #' + pageName, function(){
      $('.flexslider').flexslider({
        animation: 'fade'
      });
      vertCenter();
      $(this).animate({opacity: 1}, 250);
    });
  });
  history.pushState({}, null, "#"+pageName);
}

$(function() {
  var lastPage;
  (function() {

    var url = document.URL,
    loadPage = url.split("#"),
    data;

    if(loadPage[1]) {
      data = loadPage[1];
    } else {
      data = "home";
    }
    loadPageContent(data);
    window.addEventListener('popstate', function(event) {
      console.log('popstate fired!');
      loadPageContent(lastPage);
      }); 
  }());

$(document).on('click', 'a[data-page]', function(event){
  event.preventDefault();
  lastPage = page;
  var page = $(this).attr('data-page')
  loadPageContent(page);
  return false;
  });
});

編集: 示唆されているように、2 つの関数の内部ではなく、2 つの関数の間に「var lastPage」を配置しました。まだ修正されていません。「戻る」で取得している URL は /#undefined です