jQuery masonry複数のajax呼び出しの問題

Question

ajax呼び出しでjQuery Masonryプラグインを使用する際に問題が発生しました。

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(); 

} 

は、私は、サーバーから、かなり標準的なHTMLコンテンツを取得しているフィルタ機能（divタグ、画像はありません）を持っています

これはすべて正常に動作しています。しかし、私がしようとすると、クリックからfilter()を呼び出すとき、それはコンテンツの罰金を取得していますが、石工がそれをフォーマットされていません。

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

    filter(); 

    return false; 

}); 

私はAjaxの成功機能に石工を呼んでいるとして、それは最初の実行に取り組んでいます、私は本当に問題が何であるかを見ることができません...誰もがアイデアを持っていますか？

ありがとうございます！

ジェームズ

Answer 1

は、あなたは、あなたのアイテムを追加した後。石材（ 'リロード'）$（ '＃結果を'）を呼び出す必要があります。

Answer 2

あなたはAjaxのロードが終了した後、「refire」に石工を指示する必要があります：石造は（.reloadを持って

$(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' 
     }); 
    }); 
}); 

）が、私はあなたがいた場合を除き、それは本当によく働くいませんでした：

例追加または追加する。内容を完全に変更したときに呼び出すには、このようにしなければなりませんでした。

たぶんここに、よりよい解決策：

$(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(); 
});