Question

Here is my code:

var $container = jQuery('#hentry-wrapper');
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.hentry',
            columnWidth: 454,
            gutterWidth: 30,
            isResizable: true
        });
    });

    $container.infinitescroll({
        navSelector  : '#nav-pagination',
        nextSelector : '#nav-pagination .next',
        itemSelector : '.hentry',
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = jQuery( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true ); 
        });
    });

    // kill scroll binding
    jQuery(window).unbind('.infscr');

    // hook up the manual click guy.
    jQuery('#load-more').click(function(){
        $container.infinitescroll('retrieve');
        return false;
    });

    // remove the paginator when we're done.
    jQuery(document).ajaxError(function(e,xhr,opt){
        if (xhr.status == 404) jQuery('#load-more').remove();
    });

The problem is that #load-more doesn’t remove when we’re done. But here is fine http://www.infinite-scroll.com/trigger.html What’s the problem? Any help please?

Answer 1

The last page should not contain #load-more element.