执行搜索功能后，jQuery Isotope 中的 Infinitescroll 失败答案

【问题标题】：Infinitescroll fails in jQuery Isotope after Search function is performed执行搜索功能后，jQuery Isotope 中的 Infinitescroll 失败
【发布时间】：2011-11-15 05:24:23
【问题描述】：

我正在使用Isotope 和infinitescroll 将图像加载到图像库中。我添加了一个搜索功能，使用Quicksearch 来过滤图像并在执行搜索后重新排列同位素。如果我在搜索之前应用无限滚动，它会完美运行，但如果我先搜索然后尝试应用无限滚动，我会得到加载图标等，但没有加载图像。这是我的代码：

 // ======================= Isotope ===============================

 var $container = $('#container');

 $(function(){
  $container.imagesLoaded( function(){
    $(this).isotope({
      itemSelector : '.item',
      masonry : {
      columnWidth : 130

 }

    });
  });
 // ======================= search   ===============================       


$('input#discussion-search').quicksearch('#container .item', {
    'show': function() {
        $(this).addClass('quicksearch-match');
    },
    'hide': function() {
        $(this).removeClass('quicksearch-match');
    }
}).live("keyup", function(){
    setTimeout( function() {
        $container.isotope({ filter: '.quicksearch-match' });
    $container.isotope('reLayout'); 
    }, 100 );
});

});


// ======================= Infinite Scroll  ===============================

$container.infinitescroll({
navSelector  : 'a#nav',    // selector for the paged navigation 
nextSelector : 'a#nav',  // selector for the NEXT link (to page 2)
itemSelector : '.item',     // selector for all items you'll retrieve
loading: {
 finishedMsg: 'No more Images to load.',
img: 'res/icons/load.gif',
msgText: "<em>Loading Images...</em>"
},
behavior : 'twitter',
errorCallback: function() { 
  // fade out the error message after 2 seconds
  $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal');   
}
},
// call Isotope as a callback
function( newElements ) {
  $container.isotope( 'insert', $( newElements ) );
}
);


$('a#Button').click(function(e){
// call this whenever you want to retrieve the next page of content
// likely this would go in a click handler of some sort
e.preventDefault();
    $container.infinitescroll('retrieve');
$('a#nav').hide();
return false;
 });

【问题讨论】：

标签： jquery jquery-isotope infinite-scroll

【解决方案1】：

看来我至少暂时找到了一个可行的解决方案，尽管它可能不是最好的解决方案。我添加了一个回调到无限滚动，让同位素过滤器“显示全部”，然后添加了查找代码，以便可以搜索新添加的图像

 $container.infinitescroll({
 navSelector  : 'a#nav',    // selector for the paged navigation 
 nextSelector : 'a#nav',  // selector for the NEXT link (to page 2)
 itemSelector : '.item',     // selector for all items you'll retrieve
loading: {
 finishedMsg: 'No more Images to load.',
 img: 'res/icons/load.gif',
 msgText: "<em>Loading Images...</em>"
 },
 behavior : 'twitter',
 errorCallback: function() { 
  // fade out the error message after 2 seconds
  $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal');   
 }
 },
 // call Isotope as a callback
 function( newElements ) {
  $container.isotope( 'insert', $( newElements ) );

 $container.isotope({ filter: '*' });  
 $('input#discussion-search').quicksearch('#container .item', {
    'show': function() {
        $(this).addClass('quicksearch-match');
    },
    'hide': function() {
        $(this).removeClass('quicksearch-match');
    }
 }).live('keyup',function(){
    setTimeout( function() {
        $container.isotope({ filter: '.quicksearch-match' });
$container.isotope();  

    }, 100 );
 });

【讨论】：