jQuery:同位素hashchange、filter和back按钮

Question

我目前在jQuery同位素插件和hashchange函数方面遇到了一些问题。我有一个div网格，在页面加载时只显示grid-block-filterdiv，单击其中一个.grid-block-filterdiv会带来相关内容，并在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。有没有办法阻止这种情况的发生？我想不通。如有任何建议，我们将不胜感激！

Answer 1

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

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

如果您将history.navigationMode设置为"兼容"，那么jQuery的就绪功能将在后退按钮操作时启动

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