Question

I am using jQuery to display a overlay div on hover for my products. However I also have AJAX pagination. The overlay works fine on “page 1”, but on “page 2” it doesn’t.

The overlay JS:

jQuery(function () {

jQuery('.proditem').hover(function () {
    jQuery('.productoverlay', this).stop().css({
        "opacity": 0.3
    }, "fast");
},

function () {
    jQuery('.productoverlay', this).stop().css({
        "opacity": 0
    }, "fast");
});
});

The ajax that calls “page 2” to display on same page.

jQuery.ias({
    container : '.category-products',
    item: '.proditem',
    pagination: '.toolbar .pager',
    next: '.next',
    loader: '<img src="images/ajaxscroll/loader.gif" /> Loading more products'
});

Not sure if this is enough information or not? The ajax pagination is a plugin.

Please help, maybe something simple I’m missing?

Thanks

Mike

Answer 1

jQuery('body').on({
    'mouseover':  function () {
        jQuery('.productoverlay', this).stop().fadeTo('fast', 0.3);
    },
    'mouseout': function () {
        jQuery('.productoverlay', this).stop().fadeTo('fast', 0.3);
    }
}, '.proditem');

This code will work for elements that doesn’t exist yet.

As it’s suggested in the comment below – the better way to do this is to replace ‘body’ to the closest parent element for ‘.proditem’ that isn’t changing after AJAX-paging.

Don’t forget to up Sinetheta‘s comment for useful fixes 🙂