jQuery: изотопный хешрейт, фильтр и кнопка «Назад»

В настоящее время у меня есть некоторые проблемы с плагином 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 как есть при загрузке страницы. Есть ли способ остановить это? Я не могу понять это. Любые предложения будут ценны!


html filter jquery jquery-isotope hashchange
person user1374796    schedule 30.06.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

history.navigationMode = 'compatible';
$(document).ready( function(){ /* code */ });
person Travis J    schedule 30.06.2013
comment
Похоже, это не работает так, как я хотел, этот метод работает при нажатии кнопки «Назад» и загрузке предыдущей страницы, но поскольку я использую функцию хэш-обмена, страница не перезагружается и кажется, этот метод не работает. Я также пытался выгрузить окно, но снова столкнулся с той же проблемой, поскольку я на самом деле не ухожу со страницы? - person user1374796; 03.07.2013
comment
Это не сработало для меня в Chrome (без хэштегов в моем случае использования). Перемещение сценариев Isotope ниже разделов Isotope также не решило проблему. - person Deborah; 19.05.2016