2013-02-07 16 views
6

4 seçenek içeren bir seçim kutumuz var, bunların her biri mevcut tüm .item div'leri kaldırmaya ve yeni .items yüklenmesine ve ardından izotop kullanılarak yeniden hizalanmasına neden olacak şekilde seç.Isotope, ajax yüklü içerikle çalışmıyor

$('.menu-select').change(function(){ 
    var selected=$('.menu-select-option:selected').html().toLowerCase(); 
     if(selected=='all') 
      { 
       loadContent('mixed_home_all.html'); 
      } 
     if(selected=='recommended') 
      { 
       loadContent('mixed_home_reco.html'); 
      } 
     if(selected=='popular') 
      { 
       loadContent('mixed_home_pop.html'); 
      } 
}); 

loadContent fonksiyonu şuna benzer: Nedense

function loadContent(filename){ 
     var $item=$('.item'); 
     $container.isotope('remove', $item); 
     $container.load(filename, function(){ 
      $container.imagesLoaded(function(){ 
       $container.isotope('reLayout'); 
      }); 
     }); 
    } 

, reLayout çalışmıyor. isotope-item sınıfı da ayrı öğelere eklenmiyor. Konsol günlüğünde hata yok.

cevap

14

Bunu, önceki izotopu yok ederek ve seçim kutusundaki her değer için yeni bir tetikleme yaparak çözdüm.

function loadContent(filename){ 
     var $item=$('.item'); 
     $container.isotope('destroy'); //destroying isotope 
     $container.load(filename, function(){ 
      $container.imagesLoaded(function(){ 
       $container.isotope({ //triggering isotope 
        itemSelector: '.item' 
       }); 
      }); 
     }); 
    } 
+0

Merhaba ben bu kodun başarılı uyarlanmış ve iyi çalışıyor ama benim sıralama elemanlarını yeniden yüklendikten sonra çalışmıyor ... Belki bana helo olabilir ... Teşekkürler: My loadContent işlevi artık bu gibi görünüyor! – vitaminasweb