私は自分のプロジェクトに無限スクロールを備えたMasonryを使用しています。私のコンテンツは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 がクリックされたときに実行されます。すべて正常に動作していますが、最初のページのみです。Infinite Scroll を介して 2 番目のページをロードし、.voteup クラスの div をクリックしても何も起こりません。私のjqueryコードは、2番目のページからロードされたすべての要素に対して機能していません.
石工と無限スクロールの私のコードは次のとおりです。
$(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 );
});
});
});
助けてください！