獲取同位素在AJAX加載的容器上工作

Question

我正在使用同位素進行頁面上某些塊的佈局。

<nav> 
    <a href="/page1.htm">Page 1</a> 
    <a href="/page1.htm">Page 1</a> 
    <a href="/page1.htm">Page 1</a> 
</nav> 
<div class="main-content-container"> 
    <div class="main-content"> 
     <div class="blocks"> 
      <div class="block">Block 1</div> 
      <div class="block">Block 2</div> 
      <div class="block">Block 3</div> 
      <div class="block">Block 4</div> 
      <div class="block">Block 5</div> 
     </div> 
    </div> 
</div> 

同位素被初始化像這樣（我使用jQuery）：

$(function(){ 
    var container = $('.blocks'); 
    container.isotope({ 
     itemSelector: '.block', 
     masonry: { 
      columnWidth: 220, 
      gutter: 20 
     }, 
     itemPositionDataEnabled: true 
    }); 
}); 

這工作完全在我的網頁HTML結構可以如下簡化。

但是，我想從不同的網頁中提取內容，具有完全相同的結構類型，並將其用作「同位素內容」。

我加載像這樣的內容，使用jQuery load()：

$('nav a').click(function(){ 
    var link = $(this).attr('url'); 
    $('.main-content-container').load(link + ' .main-content', function() { 

     // Content loaded, so re-init Isotope: 
     container.isotope({ 
      itemSelector: '.block', 
       masonry: { 
        columnWidth: 220, 
        gutter: 20 
       }, 
      itemPositionDataEnabled: true 
     }); 

    }); 
}); 

再次，這完全在從外部網頁內容加載到當前頁面。它只是取代main-content容器內的所有內容，這正是我想要的。但是，同位素的重新初始化不起作用。它沒有錯誤，它只是沒有做任何事情。

我試過在加載AJAX內容之前點擊同位素實例上的destroy。我也嘗試在同步AJAX成功回調（而不是異步這是什麼load做什麼

重新初始化同位素沒有任何作品，我不能任何例子像這樣工作的地方Isotope容器正在取代了AJAX，只是其中的內容被替換的原因，我正在取代整個事情是因爲這裏有更多的內容（過濾器等），它需要加載它

任何人都可以建議如何得到這個工作嗎？

非常感謝。

Answer 1

你必須重新抓住你的目標元素，你不能再次使用container，它不知道新裝的元素！

$('.main-content-container').load(link + ' .main-content', function() { 

    // Content loaded, so re-init Isotope: 
    container = $(".blocks"); //grab newly loaded elems 
    container.isotope({ 
     itemSelector: '.block', 
      masonry: { 
       columnWidth: 220, 
       gutter: 20 
      }, 
     itemPositionDataEnabled: true 
    }); 

});