Question

我正在使用jQuery在我的产品上悬停时显示重叠div。但是我也有AJAX分页。叠加层在“第1页”上工作正常，但在“第2页”上却没有。

叠加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");
});
});

调用“第2页”的ajax显示在同一页面上。

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

不确定这是否是足够的信息？ ajax分页是一个插件。

请帮助，也许是我想念的简单事情？

由于

麦克

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');

此代码适用于尚不存在的元素。

正如下面的评论中所建议的那样 - 更好的方法是将'body'替换为'.proditem'最接近的父元素，该元素在AJAX分页后不会改变。

不要忘记提出Sinetheta的评论，以获得有用的修正：）

Answer 2

覆盖的jQuery仅在加载页面时执行。因此它仅适用于当时页面上的元素。当您使用新元素替换它们时，使用AJAX获取第二页时，您必须再次运行初始化代码，因此它也适用于新元素。

jQuery没有处理ajax分页

2 个答案: