jQuery砌體多個Ajax調用問題

Question

我遇到了使用jQuery Masonry插件和ajax調用的問題。

我有一個從服務器得到一些非常標準的HTML內容過濾功能（div的，沒有圖像）：

var searchResults = $('div#results'); 

function filter() { 

    var text  = 'text'; 
    var orderby  = 'order'; 
    var source  = 'source'; 
    var media  = 'media'; 
    var format  = 'format'; 
    var tags  = 'tags'; 

    var fetchUrl = '/search/results/ ' + text + '/' + orderby + '/' + source + '/' + media + '/' + format + '/' + tags; 


    $.ajax({ 
      type: "POST", 
      url: fetchUrl, 
      cache: false, 
      data: "after=000000", 
      success: function(data){ 

       searchResults.html(data); 

       $('#results').masonry({ 
        columnWidth: 360, 
        itemSelector: '.related' 
       }); 
      } 
     }); 

} 

這被當時稱爲在頁面加載像這樣：

if (searchResults.length > 0) { 

    filter(); 

} 

這一切都按預期工作。然而，當我嘗試和點擊呼叫filter()，它得到的內容很好，但是砌體沒有格式化：

$('nav#view-types a#grid, nav#view-types a#list').click(function() { 

    filter(); 

    return false; 

}); 

正如我在阿賈克斯成功函數調用磚石，它的工作在第一次運行，我真的不知道這個問題會是什麼......任何人有任何想法？

謝謝！

詹姆斯

Answer 1

你需要調用$（ '＃結果'）。砌築（ '刷新'）已追加項目之後。

Answer 2

你需要告訴磚石阿賈克斯負載完成後，「重燒」：

例如：

$(document).ajaxComplete(function() { 
    console.log("Ajax finished"); //remove this if you want, useful for debugging 
     $(document).ready(function() { 
     $('#content').masonry({ 
     columnWidth: 260, //change this accordingly 
     itemSelector: '.item' 
     }); 
    }); 
}); 

砌體有.reload（），但我發現它並沒有真正很好地工作，除非你是追加或預先考慮。要在完全更改內容時調用它，我必須這樣做。

也許有更好的解決方案在這裏：

$(document).ready(function() { 
     $('#admin_content').masonry({ 
     columnWidth: 260, 
     itemSelector: '.masonry-item', 
     isAnimated:true, 
       animationOptions: { 
        duration: 500, 
        easing:'swing', 
        queue :false 
       } 
     }); 
    }); 
$(document).ajaxComplete(function() { 
    $('#admin_content').masonry('reloadItems').masonry(); 
});