Question

I have set up infinite scroll on a website I am building here: http://richardgordoncook.com/fg/

I am using a WordPress plugin for an image gallery, which I’ve manipulated a little to have hover overs of the filenames etc. This all works fine, until the infinite scroll kicks in and any posts after the first page seem to stop using the gallery functionality and really any javascript at all.

Any ideas? You’ll get an idea when you test it out on the site link above.

Answer 1

The elements added by the infinite scroll need to have the JavaScript events wired to them after they are created. See jQuery’s .live() function for more information on how to do this easily.

Essentially, you replace

$('.myclass').mouseover(function(){})

with

$('.myclass').live('mouseover', function(){});

And jQuery will automatically wire up all the extra events after the new dom elements are added to the page.

UPDATE

Ok, forget the .live() approach. It looks like the plugin has a callback function that is raised whenever it adds new new elements to the page.

$(elem).infinitescroll(options,[callback]);

The callback function is documented as

function(arrayOfNewElems){
 
     // optional callback when new content is successfully loaded in.
 
     // keyword `this` will refer to the new DOM content that was just added.
     // as of 1.5, `this` matches the element you called the plugin on (e.g. #content)
     //                   all the new elements that were found are passed in as an array
 
}

You should use this callback to wire up the event handlers to the new elements on the page. It would look something like this

function(elements)
{
    $(elements).mouseover(function(){});
    $(elements).mouseout(function(){});
}

Depending on what you need to do, you may need to use a for loop and iterate over each item individually instead of acting on them as one batch.