JQuery Masonry делает вызов Ajax удаляет кирпичную кладку класса

Question

Я использую плагин jQuery Masonry, и у меня возникает проблема, которая возникает, когда я делаю ajax-вызов на другую страницу, чтобы загрузить изображения для галереи. Вызов ajax работает, и изображения загружаются, но когда вызов сделан, происходит что-то, что удаляет один из классов, к которым масонство добавляет один из моих div-ов.

Вот как мой HTML выглядит на первой странице. Здесь все хорошо и показывает класс masonry-brick, который мне нужен для вывода соответствующего css, чтобы все выглядело хорошо, а также для вывода встроенного css.

  <a href="/system/images/series_uploads/15/original/berkshire_25585_walnut_famousdaves03.jpg?1330115640" rel="lightbox['gallery']">
    **<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">**<img alt="" src="/system/images/series_uploads/15/gallery/berkshire_25585_walnut_famousdaves03.jpg?1330115640" title="Berkshire" />
    <div class="gallery-text">
      <h3>Berkshire</h3>
      <p>HDP &ndash; High Definition Porcelain</p>
    </div>
    </div>
  </a>

Когда я нажимаю на ссылку, чтобы сделать вызов ajax, изображения загружаются нормально, и это работает на всех ссылках, но класс кирпичной кладки удаляется, и изображения теряют свою CSS.

  jQuery("#project-galleries-navigation li.load-category a").on("click", function(){      
     var href = jQuery(this).attr("href");
            jQuery("#gallery").fadeOut(300).remove("img").load(href).fadeIn(2300);      
        return false;           
  }); 

Это код, который я использую для кладки.

var $container = jQuery('#copy-wrapper-gallery');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    isAnimated: true            
  });
});     

Это то, что происходит с моим HTML, когда страница загружается с новыми данными. Класс кирпичной кладки больше не присутствует, и встроенный CSS исчезает.

  <a href="/system/images/series_uploads/7/original/ashton_23931_smokey_beige_.jpg?1330114250" rel="lightbox['gallery']">
   **<div class="item">**<img alt="" src="/system/images/series_uploads/7/gallery/ashton_23931_smokey_beige_.jpg?1330114250" title="Ashton" />
    <div class="gallery-text">
      <h3>Ashton</h3>
      <p>Porcelain</p>
    </div>
    </div>
  </a>

У кого-нибудь была такая проблема или есть способ ее решить?

Answer 1

Я смог заставить его работать, изменив этот jquery и добавив для него функцию обратного вызова.

            jQuery("#gallery").fadeOut(300).remove("img").load(href, function(){
                    jQuery("#gallery").masonry("reload");
                }).fadeIn(2300);    
                e.preventDefault();                     
      });