jquery isotope无限滚动在附加元素上添加悬停效果

Question

我使用isotope和infinite-scroll脚本的组合在用户到达我的网站底部时加载更多数据：

var $ = jQuery,
$container = $('#content.grided .wrap #gridcontainer');
if ( $container.length > 0 ) {
    $container.isotope({
        itemSelector : '.grid-item',
        masonry : {
            columnWidth : 240
        }
    });     
        //enable infinity scroll
    $container.infinitescroll({
            navSelector  : '#posts_navi',    // selector for the paged navigation 
            nextSelector : '#posts_navi a.previous_posts',  // selector for the NEXT link (to page 2)
            itemSelector : '.grid-item',     // selector for all items you'll retrieve
            loading: {
                finishedMsg: 'No more pages to load.',
                img: 'http://i.imgur.com/qkKy8.gif'
              }
            },
            // call Isotope as a callback
            function( newElements ) {
              $container.isotope( 'appended', $( newElements ) ); 
            }
          );    
    }

将元素添加到dom后，我想仅对这些元素运行jQuery脚本，以添加一些行为：

$('#gridcontainer .grid-item').each(function(){
    var $this = $(this),
    $overlay = $this.find('span.overlay');

    $this.hover(
        function(){
            $this.addClass('hovered');
            $overlay.stop().hide().fadeIn('100');
        },
        function(){
            $this.removeClass('hovered');
            $overlay.stop().show().fadeOut('100');
        }
    );
}

我知道我应该在使用isotope append的第一个脚本的回调函数中执行此操作，但我该如何正确执行？