Question

我正在使用jQuery插件Masonry，当我对另一个页面进行ajax调用以加载图库的图像时，我遇到了一个问题。 ajax调用工作，图像加载，但是当调用时，会发生一些事情，删除了Masonry附加了一个我的div之类的类。

以下是我的html在第一页上的显示方式。这里的一切都很好，并显示了类砌砖，我需要渲染出适当的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();                     
      });

制作Ajax调用的jQuery Masonry删除了类砌砖

1 个答案: