検索機能を実行した後、jQueryアイソトープでinfinitescrollが失敗する

Question

Isotopeとinfinitescrollを使用してイメージギャラリーにイメージを読み込みます。私は、検索が行われた後に画像と再同位体同位体をフィルタリングするためにQuicksearchを使用して検索機能を追加しました。私がinfinitescrollを検索する前に適用すると完全に動作しますが、最初に検索してinfinitescrollを適用しようとすると、読み込みアイコンなどが表示されますが、イメージは読み込まれません。ここに私のコードは次のとおりです。

// ======================= 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; 
}); 

Answer 1

私が、少なくとも一時的にそれが最善の解決策ではないかもしれないが、動作します。この問題の解決策を見つけたようです。私はinfinitescrollにコールバックを追加して、アイソトープフィルタを「すべて表示」し、新しい追加画像が検索可能になるようにコードを追加しました。

$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); 
});