jQuery不适用于ajax分页答案

【问题标题】：jQuery not working on ajax paginationjQuery不适用于ajax分页
【发布时间】：2012-12-04 08:50:56
【问题描述】：

我正在使用 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");
});
});

调用“page 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 分页是一个插件。

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

谢谢

迈克

【问题讨论】：

所有发布的代码看起来都很奇怪。 css() 方法没有持续时间，看起来您应该使用 animate()，因为这是您正在使用的语法。如果不了解所用插件的更多信息，就无法弄清楚 ajax 调用的第二段代码？

标签： javascript jquery ajax pagination

【解决方案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 的评论以获得有用的修复:)

【讨论】：

这是正确的答案，我会提出的唯一 2 个建议是使用 .fadeTo(duration, opacity) 而不是 css opacity 以实现跨浏览器兼容性。并绑定最接近的“持久”元素而不是<body>，也许有某种<div id="container">？
太棒了！非常感谢！洛塔爱:)
谢谢，Sinetheta 更新了我的答案。迈克·米德，不客气:)

【解决方案2】：

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

【讨论】：

嗯，好的，当新元素加载完毕后，我将如何再次运行它？
将初始化代码放在单独的函数中。在 DOM 准备好和 AJAX 调用成功时调用此函数。后者可能是个问题，因为我认为您不会自己执行 AJAX 调用。我对这个分页功能不是很熟悉，但是现在你知道问题出在哪里了，也许你可以找到一个功能，让你在新页面加载后运行一个函数。
显然您使用的是Infinite Ajax Scroll，这不是完全分页。无论如何，在我链接的那个页面上的 cmets 上，一个 Barty 提到了同样的问题。解决方案：显然，存在一个 onRenderComplete 事件，允许您在加载其他内容时采取特定操作。