Infinite scroll and image gallery issue

1 comment

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.

   Log in to Reply