Isotope not working with ajax loaded content

Question

I have a select-box that contains 4 options, selecting each of which will result in removing all the present .item divs and loading new .items and then realigning them using isotope.

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

The loadContent function looks like this :

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

FOr some reason, reLayout is not working. The class isotope-item is not getting added to the individual items either. THere's no error in the console log.

Answer 1

I resolved this by destroying previous isotope and triggering a fresh one for every value in the select-box. My loadContent function looks like this now :

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