我正在为我的项目使用 Masonry with 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 时执行。一切正常,但仅适用于第一页。当我通过无限滚动加载第二页并单击带有 .voteup 类的某个 div 时,什么也没有发生。我的 jquery 代码不适用于从第二页加载的所有元素。
这是我的砌体和无限滚动代码:
$(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 );
});
});
});
请帮忙!