jQuery: isotope hashchange, фильтр и кнопка возврата

Question

В настоящее время у меня возникают проблемы с изотопным плагином jQuery и функцией hashchange. У меня есть сетка divs и на загрузке страницы ТОЛЬКО отображаются divs grid-block-filter, нажатие на один из разделов .grid-block-filter приводит к соответствующему контенту, прикрепляя хеш к URL-адресу, чтобы пользователь мог перейти к нему из другого места, все это прекрасно работает , вот мой пример, хотя и я объясню мою проблему:
jsFiddle (с хэшей): http://jsfiddle.net/neal_fletcher/vcffM/9/show

JQuery:

$(document).ready(function() { 

    var $container = $('#main-grid'); 

    if (location.hash != "") { 
     var hashfilter = "." + location.hash.substr(1); 
    } else { 
     var hashfilter = "*"; 
    } 

    $container.imagesLoaded(function() { 
     $container.isotope({ 
      filter: hashfilter + '.nav-block', 
      itemSelector: '.grid-block', 
      animationEngine: 'best-available', 
      masonry: { 
       columnWidth: 4 
      } 
     }); 
    }); 

    $('.grid-block-filter a').click(function() { 
     var selector = jQuery(this).attr('data-filter'); 
     var prettyselector = selector.substr(1); 
     location.hash = prettyselector; 
     return false; 
    }); 

    $(window).hashchange(function() { 

     if (location.hash != "") { 
      var hashfilter = "." + location.hash.substr(1); 
     } else { 
      var hashfilter = "*"; 
     } 


     $container.imagesLoaded(function() { 
      $container.isotope({ 
       filter: hashfilter, 
       itemSelector: '.grid-block', 
       animationEngine: 'best-available', 
       masonry: { 
        columnWidth: 4 
       } 
      }); 
     }); 
    }); 
}); 

Если нажать на ONE FILTER, например, это приносит в релевантное содержание просто отлично , но затем нажатие на кнопку возврата возвращает ВСЕ содержимое, а не просто показывает grid-block-filter, как и когда страница lo Объявления. Стоит ли вообще останавливать это? Я не могу понять. Любые предложения будут ценны!

Answer 1

Когда пользователь нажимает кнопку «Назад», тогда document.ready не срабатывает. В этом суть проблемы, с которой вы сталкиваетесь. Один из способов - разместить ваши сценарии в нижней части страницы, а не в методе onload, чтобы гарантировать, что они всегда выполняются.

Другим способом было бы принять подход этого StackOverflow ответа: https://stackoverflow.com/a/170478/1026459

Если вы установите history.navigationMode на «совместимый», то готов функция JQuery будет стрелять на кнопку Назад операции

history.navigationMode = 'compatible'; 
$(document).ready(function(){ /* code */ });