jQuery：同位素hashchange，过滤器和后退按钮

Question

我目前有jQuery同位素插件和hashchange函数的一些问题。我有一个div的网格和页面加载只有grid-block-filter divs显示，点击其中一个.grid-block-filter divs带来相关的内容，附加一个散列到网址，以便用户可以从其他地方导航到它，这一切工作正常，这里是我的榜样，虽然我会解释我的问题：
的jsfiddle（与哈希）：http://jsfiddle.net/neal_fletcher/vcffM/9/show

jQuery的：如果你点击ONE FILTER例如

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

，由此带来的相关内容就好了，但随后点击后退按钮会返回所有内容，而不是像显示页面lo时一样显示grid-block-filter广告。无论如何要阻止这种情况发生？我无法弄清楚。任何建议将不胜感激！

Answer 1

当用户点击后退按钮时，document.ready不会触发。这是你面临的问题的核心。一种方法是将脚本放在页面的底部，而不是放在onload方法中，以确保它们始终执行。

另一种方法是利用这个StackOverflow的答案的方法：https://stackoverflow.com/a/170478/1026459

如果设置history.navigationMode为“兼容”，然后jQuery的ready功能将火上后退按钮操作

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