jQuery砌體制作Ajax調用刪除類砌體磚

我正在使用jQuery插件砌體和我有一個問題，當我做一個ajax調用另一個頁面加載圖片的圖像時發生。 ajax調用起作用，並且圖像加載進來，但是當調用發生時，會發生一些事情，從而刪除了Masonry附加的其中一個我的div的類之一。jQuery砌體制作Ajax調用刪除類砌體磚

這是我的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>

有沒有人有這個問題或知道一種方法來解決這個問題？

來源

2013-04-23 Jarrod

我能夠通過修改這個jQuery併爲其添加回調函數來實現它。

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

來源

2013-04-23 17:06:09 Jarrod

jQuery砌體制作Ajax調用刪除類砌體磚

回答

相關問題