Milen Mihalev
Milen Mihalev

Reputation: 350

Masonry with Infinite Scroll - jQuery code is not working after the 1st page

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

Answers (1)

Milen Mihalev
Milen Mihalev

Reputation: 350

I have been able to solve this. The goal was to add function vote()inside $container.infinitescroll()

Upvotes: 1

Related Questions