Масонный фильтр + бесконечный прокрутки вопрос

Question

Я построил jQuery Масонство макет с бесконечной прокрутки и фильтрации.

Моя проблема заключается в том, что при нажатии фильтра перед прокруткой содержимое, загруженное бесконечным прокруткой, не фильтруется.

Есть ли способ исправить это?

Вот ссылка, чтобы проверить: http://www.jcvergara.com/working/

Вот полный код кладки:

$(document).ready(function(){ 
    var $container = $('.container'); 
    // initialize 
    $container.masonry({ 
     columnWidth: 250, 
     itemSelector: '.item', 
     isFitWidth: true 
    }); 
    $container.masonry('on', 'layoutComplete', function() { 
     $('.right-line').css('height', $('.container').height()); 
    }); 
    $('.right-line').css('height', $('.container').height()); 


    // infinite scroll 
    var $container = $('#content'); 
    $container.infinitescroll({ 
     navSelector : "nav.posts-navigation",    
     nextSelector : "div.nav-previous a:first",  
     itemSelector : "#content div.item",  
     }, 
     // trigger Masonry as a callback 
     function(newElements) { 
      var $newElems = $(newElements); 
      $container.masonry('appended', $newElems); 

      // open posts in ajax 
      $('.post-link').click(function(){ 
      $('.openarticle').css('display', 'block'); 
      var post_link = $(this).attr('href'); 

      $('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>'); 
      $('#openthis').load(post_link); 
      $('<a></a>', { 
       text: 'Close', 
       class: 'close', 
       id: 'close', 
       href: '#' 
      }) 
       .prependTo($('.openarticle .main')) 
       .click(function() { 
         $('.openarticle').css('display', 'none'); 
         $('#close').remove(); 
        }); 
      return false; 
      }); 
     } 
    ); 

    // filtering   
    $(".cat-item a").click(function(e) { 
     e.preventDefault(); 
     var cut_url = "http://www.jcvergara.com/category/"; 
     var group = $(this).attr('href');  
     group = group.replace(cut_url, '').slice(0,-1); 
     var group_class = "." + group; 
     $(".cat-item a.active").removeClass('active'); 
     $(this).addClass('active');   
     if(group != "all") { 
      $(".item").hide(); 
      $(group_class).show(); 
      $container.masonry(); 
     } else { 
      $(".item").show(); 
      $container.masonry(); 
     } 
    }); 
}); 

Answer 1

Попробуйте использовать "на" для функции мыши:

// filtering   
    $(".cat-item a").on("click",function (e) { 
    e.preventDefault(); 
    var cut_url = "http://www.jcvergara.com/category/"; 
    var group = $(this).attr('href');  
    group = group.replace(cut_url, '').slice(0,-1); 
    var group_class = "." + group; 
    $(".cat-item a.active").removeClass('active'); 
    $(this).addClass('active');   
    if(group != "all") { 
     $(".item").hide(); 
     $(group_class).show(); 
     $container.masonry(); 
    } else { 
     $(".item").show(); 
     $container.masonry(); 
    } 
    });