加載新的AJAX時，同位素容器不會定位新對象，而是重疊舊對象

因此，我的頁面上的所有內容都是通過AJAX調用加載的。加載新的AJAX時，同位素容器不會定位新對象，而是重疊舊對象

我想，如果我只是把我的同位素在文檔準備功能，它會工作，但它不工作：

$(function(){ 

     container = $('#content'); 
     container.isotope({ 
      itemSelector: '.tile', 
      masonry: { 
       columnWidth: 100 
      },   
      }); 

    });

的AJAX調用成功，但沒有出現，頁面保持空白。任何想法爲什麼？我沒有得到任何錯誤。

然而，我做了我的AJAX調用後，通過使用jquery .then方法來設法讓我的同位素工作。這裏是同位素工作的例子：

function grabNews(){ 

    var $content = $('#content'); 

    $.ajax({ 
     type:'GET', 
     url:'json/dummy.json', 
     success: function(news) { 

     for(i=min; i<max; i++){ 
       $content.append('<div class="tile x150x100"><h3>' + news[i].headline +'</h3><br>' + news[i].text + '</div>') 
       } 
     } 
     max=max+50; 
     min=min+50; 
     }, 
     error: function() { alert('Loading Failed...'); 
     } 
    }).then(function(){ 
     container = $('#content'); 
     container.isotope({ 
      itemSelector: '.tile', 
      masonry: { 
       columnWidth: 100 
      },   
      }); 
    }); 
}

.background { 
    background-color: lightblue; 
    width: 1000px; 
    height: auto; 
    margin: auto; 
    overflow: auto; 
} 
.tile { 
    background-color: white; 
    border: 1px solid black; 
    overflow: hidden; 
    float: left; 
    margin: 10px; 
    padding: 10px; 
} 
.x300x300 { 
    height: 300px; 
    width: 300px; 
} 
.x300x200 { 
    height: 300px; 
    width: 200px; 
} 
.x200x200 { 
    height: 200px; 
    width: 200px; 
} 
.x150x100 { 
    height: 150px; 
    width: 100px; 
}

<body> 
    <div id="content" class="background"> 

    </div> 
    <script src="js/jquery-1.9.1.js"></script> 
    <script src="js/isotope.js"></script> 
    <script src="js/controller.js"></script> 
</body>

因此，使用該方法。然後工作，直到我滾動到屏幕底部，再拍AJAX調用加載更多的內容。新內容不會進入同位素容器。它被簡單地忽略。

我沒有通過插入找一個準解決我的問題：

$('#content').isotope('destroy');

進入

.then(function(){ 
     $('#content').isotope('destroy'); 
     container = $('#content'); 
     container.isotope({ 
      itemSelector: '.tile', 
      masonry: { 
       columnWidth: 100 
      },   
      }); 
    });

我把它放在我的jQuery。那麼功能和同位素容器更新和認識新的對象。所以成功！但是，然後我的瀏覽器滾動回頂部！爲什麼？

如何向下滾動並在進行ajax調用時更新我的同位素容器？

請幫忙！

來源

2014-10-20 user3576724

這個問題已經解決了，我假設。

無論如何，你可以告訴同位素關於你的新項目在AJAX成功回調，參見isotope documentation下的函數 - >附加

來源

2017-01-16 15:13:57

加載新的AJAX時，同位素容器不會定位新對象，而是重疊舊對象

回答

相關問題