jQuery:同位素哈希更改、过滤器和后退按钮

Question

我目前在使用 jQuery 同位素插件和 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，这会很好地引入相关内容，但随后单击后退按钮会返回所有内容，而不仅仅是显示 网格- block-filter 就像页面加载时一样。有没有办法阻止这种情况的发生？我想不通。任何建议将不胜感激!

Answer 1

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

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

If you set history.navigationMode to 'compatible' then jQuery's ready function will fire on Back button operations

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