Back button works only once

Question

I'm working on my page and can't find answer for my issue.

I'm using window.history.pushstate, and onpopstate event, here is my code:

changeContent = function(href) {
  window.history.pushState({}, '', href);
  if (href == "/") {
    $('#main').load('main.html');
  } else {
    $('#main').html('<iframe id="gallery" src="photos'+href+'/index.html"></iframe>');
  }
};

$(window).on("popstate", function(e) {
  changeContent(location.pathname);
});

$(document).on("click", ".galleryLink", function() {
  var href = $( this ).attr( "href" );
  changeContent(href)
  return false;
});

i.e.

google page -> my main page -> gallery -> back button -> my main page -> back button -> my main page -> back button -> my main page

What's going on?

Answer 1

Got it!

Line:

window.history.pushState({}, '', href);

should be inside

$(document).on("click", ".galleryLink", function()

I put it inside

changeContent = function(href)

this was my fault... :-)

Answer 2

Here it says, jQuery has problems with capturing that popstate event and you should take the native onpopstate.

jQuery bind popstate event not passed.

However I wonder why it works once?