Reputation: 350
I'm using Masonry with Infinite Scroll for my project. My content is dynamically generated via php. I have images inside div's that do some things when they (div's) are clicked. Here is my jQuery code:
$(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;
});
});
The code above is executed when div .voteup is clicked. All is working fine, but only for the 1st page. When I load second page via Infinite Scroll and click on some div with .voteup class nothing happens. My jquery code is not working for all the elements loaded from the second page.
Here is my code for Masonry and 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 );
});
});
});
Please, help!
Upvotes: 0
Views: 438
Reputation: 350
I have been able to solve this.
The goal was to add function vote()
inside $container.infinitescroll()
Upvotes: 1