JQuery syntax - hover not working on infinite scroll pages

Question

I'm using the infinite-ajax-scroll plugin (https://github.com/webcreate/infinite-ajax-scroll) along with the Hover Caption plugin (http://ryun.github.io/HCaptions/). The hover effect works well on the first page, however it isn't applied to the pages loaded via the infinite scroll plugin.

I have read that using .on() instead of .hover() should work and have also tried the .scroll() event. However, I can't seem to get anything working without amending the code within the plugins which isn't ideal.

What event should I be detecting to activate the hcaption plugin and how do I write this?

My code below:

<script>

$(document).ready(function () {

     //hcaptions for mouseover tiles  
     $('.hcaption').hcaptions({
         effect: "slide",
         direction: "bottom"
     });

     //isotope
     var $container = $('#container'),
         filters = {};
     $container.isotope({
         itemSelector: '.element, .element_tile',

     });    

     // Infinite Ajax Scroll configuration
     jQuery.ias({
         container: '#main', // main container where data goes to append
         item: '.element', // single items
         pagination: '.paginate', // page navigation
         next: '.paginate a', // next page selector
         loader: '<img src="public/img/ajax-loader.gif"/>', // loading gif
         loaderDelay: 200,
         thresholdMargin: -600,
         noneleft: 'No more discounts', //Contains the message to be displayed when there are no more pages left to load
         triggerPageThreshold: '10', // show "load more" if scroll more than this to stop
         trigger: "",
         onLoadItems: function (newElements) {
             // hide new items while they are loading
             var $newElems = $(newElements).css({
                 opacity: 0
             });
             // ensure that images load before adding to isotope layout
             $newElems.imagesLoaded(function () {
                 // show elems now they're ready
                 $newElems.animate({
                     opacity: 1
                 });
                 $container.isotope('insert', $newElems, true);
             });
             return true;
         }
     });
 });

 </script>

Section of code from hcaption.js that possibly needs overwriting:

        $target.css('z-index',opts.zindex+1).hide();
        $wrap.hover(function () {
            $target.stop(true, true).fadeIn(+opts.speed, opts.onshow());
        }, function () {
            $target.stop(true, true).fadeOut(+opts.speed, opts.onhide());
        });

Answer 1

Just initialize the Hover Caption plugin on your new elements once they're loaded, using the onRenderComplete hook in the Infinite Ajax Scroll plugin..

I've set up a JSFiddle and Gist to simulate the Infinite Scroll along with HCaptions to show you what I mean.

http://jsfiddle.net/nate/9JGTV/1/

$('.hcaption').hcaptions();

var iterator = 0;

$.ias({
    container : '.listing',
    item: '.post',
    pagination: '.navigation',
    next: '.next-posts a',
    triggerPageThreshold: 10,

    // You should not need this! This is purely to make
    // it possible to view repeated pages on JSFiddle,
    // since each hcaption requires a unique ID.
    onLoadItems: function (items) {
        $(items).each(function (i, item) {
            $(item).find('.hcaption')
              .removeAttr('data-target')
              .attr('data-target', 'tog-' + iterator);

            $(item).find('.cap-overlay')
              .removeAttr('id')
              .attr('id', 'tog-' + iterator);

            iterator += 1;
        });
    },

    // This is the important bit --
    // reinitialize hcaptions on the new items.
    onRenderComplete: function (items) {
        $(items).find('.hcaption').hcaptions();
    },
    loader: '<img src="http://placehold.it/100x50/333333/ffffff/&text=LOADING..."/>'
});

There are two important things to note:

• You have to use onRenderComplete, not onLoadItems, or the hcaptions won't work correctly. I suspect that the plugin makes calculations based on the rendered sizes of the items it uses, which means those sizes are wrong if it gets triggered before they're in the DOM.

• hcaptions rely on unique ids for every item. That's kind of a weird limitation - it's not the way I would write the plugin, but, whatevs. So you need to make sure that every new item you load has a unique data-target and id. For my example, I had to do some extra manipulating of the new items in the onLoadItems hook to give them unique ids that you shouldn't need to worry about.