0

我正在使用 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 分页是一个插件。

请帮忙，也许我缺少一些简单的东西？

谢谢

麦克风

4

2 回答 2

2 
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 分页后不会改变。

不要忘记添加Sintheta的评论以获得有用的修复:)

于 2012-12-04T00:35:25.440 回答
0

叠加层的 jQuery 仅在页面加载时执行。所以它只适用于当时页面上的元素。当您用新元素替换它们时，当您使用 AJAX 获取第二页时，您将不得不再次运行初始化代码，因此它也适用于新元素。

于 2012-12-04T00:21:59.327 回答