JQUERY: Site sans rechargement, retour et avance ne fonctionne pas après rafraîchissement

Question

J'essaye de faire mon portfolio sans recharger la page. J'ai un problème que je ne peux pas résoudre.

Lorsque je clique sur un lien, le lien suivant est chargé mais lorsque je reviens au premier lien et actualise la page. Le dos et l'avant ne sont plus dynamiques. Comment puis-je résoudre ce problème? Merci d'avance.

Voici mon code:

$(document).ready(function() { 
$('a').live('click', function(event){ 
    //LOAD PAGE ON CLICK 
    var link = $(this).attr('href'); 
    $('#md').fadeOut(200, function(e) { 
     $(this).load(link + ' .md', function(e) { 
      $(this).fadeIn(200); 
     }); 
    }); 
    //LOAD PAGE CHANGE HISTORY 
    window.history.pushState(null, null, link); 
    popstate = function(url){$('#md').load(url + ' #md');} 
    window.onpopstate = function(event){popstate(window.location.href);event.preventDefault();} 
    return false; 
}); 
}); 

Answer 1

Je corrige mon code pour la jquery récente

Mais je ne sais toujours pas pourquoi le onpopstate ne sauve pas l'histoire après le rechargement puis l'arrière et vers l'avant ne fonctionne plus ...

$(document).on('click', 'a', function(){ 
    //LOAD PAGE ON CLICK 
    var link = $(this).attr('href'); 
    $('#md').fadeOut(200, function() { 
     $(this).load(link + ' .md', function() { 
      $(this).fadeIn(200); 
     }); 
    }); 
    //SAVE HISTORY 
    window.history.pushState({}, null, link + ' '); 
    //BACK/FORWARD HISTORY 
    popstate = function(url){ 
     $('#md').fadeOut(200, function() { 
      $(this).load(url + ' #md', function() { 
       $(this).fadeIn(200); 
      }); 
     }); 
    } 
    //SAVE LINK BACK/FORWARD HISTORY 
    window.onpopstate = function(event){ 
     popstate(window.location.href); 
     event.preventDefault(); 
    } 
    //RETURN FALSE 
    return false; 
});