Question

我正在使用Masonry和Infinite Scroll作为我的项目。我的内容是通过php动态生成的。我在div中有图像，当点击它们（div）时会做一些事情。这是我的jQuery代码：

$(document).ready(function(){
function vote(direction, media_id) {                                                                                                                                                                                                                                           
    $.get("http://"+ siteDomain +"/a/vote?type=image&mediaId="+ media_id +"&vote=" + direction, {}, function(data, textStatus) {                                                                                                                                               
        if(direction == 'up'){                                                                                                                                                                                                                                             
            var current_vote = $("#upmedia-"+ media_id +" div").text();                                                                                                                                                                                                
            $("#ico-likes-"+ media_id +" div").css({opacity: 0}).animate({opacity: 1}, 700 ).text(parseInt(current_vote)+1);                                                                                                                                               
            $("#upmedia-"+ media_id +" div").css({opacity: 0}).animate({opacity: 1}, 700 ).text(parseInt(current_vote)+1);                                                                                                                                                 
            $("#upmedia-"+ media_id +"").removeClass("voteup").addClass("hasvotedup");                                                                                                                                                                                     
        }                                                                                                                                                                                                                                                                  
    }, "json");                                                                                                                                                                                                                                                                
}                                                                                                                                                                                                                                                                              
$(".voteup").click(function() { 
    var media_id = $(this).attr("id").replace('upmedia-', '');
    vote('up', media_id);
    return false; 
});

}）;

单击div .voteup时执行上面的代码。一切正常，但仅适用于第1页。当我通过Infinite Scroll加载第二页并点击.voteup类的某个div时没有任何反应。我的jquery代码不适用于从第二页加载的所有元素。

这是我的Masonry和Infinite Scroll的代码：

$(function(){                                                                                                                                                                                                                                                              
var $container = $(".gwrap-splash");                                                                                                                                                                                                                                   
$container.imagesLoaded( function(){                                                                                                                                                                                                                                   
    $container.masonry({                                                                                                                                                                                                                                               
        itemSelector : ".gimg-splash",                                                                                                                                                                                                                                 
        isAnimated: false,                                                                                                                                                                                                                                             
        cornerStampSelector: ".side-block-splash"                                                                                                                                                                                                                      
    });                                                                                                                                                                                                                                                                
});                                                                                                                                                                                                                                                                    
$container.infinitescroll({                                                                                                                                                                                                                                            
    navSelector  : ".public-navigation",                                                                                                                                                                                                                               
    nextSelector : ".public-navigation-next",                                                                                                                                                                                                                          
    itemSelector : ".gimg-splash",                                                                                                                                                                                                                                     
    bufferPx     : 20,                                                                                                                                                                                                                                                 
    loading: {                                                                                                                                                                                                                                                         
        finishedMsg: "No more pages to load.",                                                                                                                                                                                                                         
        img: "'.STATIC_URL.'/i/default/loader-big.gif"                                                                                                                                                                                                                 
    }                                                                                                                                                                                                                                                                  
},                                                                                                                                                                                                                                                                     
function( newElements ) {                                                                                                                                                                                                                                              
    var $newElems = $( newElements ).css({ opacity: 0 });                                                                                                                                                                                                              
    $newElems.imagesLoaded(function(){                                                                                                                                                                                                                                 
        $newElems.animate({ opacity: 1 });                                                                                                                                                                                                                             
        $container.masonry( \'appended\', $newElems, true );                                                                                                                                                                                                           
    });                                                                                                                                                                                                                                                                
});

}）;

请帮忙！

Answer 1

我能够解决这个问题。目标是在function vote()

中添加$container.infinitescroll()

使用无限滚动的砌体 - jQuery代码在第1页之后无效

1 个答案: