jQuery：同位素散列变化、过滤和后退按钮

Question

我目前在使用 jQuery isotope 插件和 hashchange 函数时遇到了一些问题。我有一个 div 网格，在页面加载时仅显示 grid-block-filter div，单击其中一个 .grid-block-filter div 会引入相关内容，将哈希附加到 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 */ });