jQuery：同位素hashchange，過濾器和後退按鈕

我目前有jQuery同位素插件和hashchange函數的一些問題。我有一個div的網格和頁面加載只有grid-block-filter divs顯示，點擊其中一個.grid-block-filter divs帶來相關的內容，附加一個散列到網址，以便用戶可以從其他地方導航到它，這一切工作正常，這裏是我的榜樣，雖然我會解釋我的問題：
的jsfiddle（與哈希）：http://jsfiddle.net/neal_fletcher/vcffM/9/show

jQuery的：如果你點擊ONE FILTER例如jQuery：同位素hashchange，過濾器和後退按鈕

$(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廣告。無論如何要阻止這種情況發生？我無法弄清楚。任何建議將不勝感激！

來源

2013-06-30 user1374796

當用戶點擊後退按鈕時，document.ready不會觸發。這是你面臨的問題的核心。一種方法是將腳本放在頁面的底部，而不是放在onload方法中，以確保它們始終執行。

另一種方法是利用這個StackOverflow的答案的方法：https://stackoverflow.com/a/170478/1026459

如果設置history.navigationMode爲「兼容」，然後jQuery的ready功能將火上後退按鈕操作

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

來源

2013-06-30 18:55:37

這似乎並沒有按照我想要的方式工作，這種方法可以在點擊後退按鈕和加載前一頁時起作用，但是因爲我使用的是hashchange函數，頁面並不在重新加載，它似乎是我thod不起作用。我也嘗試過卸載窗口，但又一次遇到同樣的問題，因爲我實際上並沒有從頁面中導航出去？ – user1374796

這在Chrome中不適用於我（在我的用例中沒有hashtags）。將Isotope腳本移動到Isotope div下面也沒有解決。 – Deborah

jQuery：同位素hashchange，過濾器和後退按鈕

回答

相關問題