无限滚动javascript已经触发答案

【问题标题】：infinite scroll javascript already fired无限滚动javascript已经触发
【发布时间】：2012-08-27 09:37:28
【问题描述】：

我有一个网站加载项目并使用 jquery 无限滚动插件在用户滚动时加载更多项目。

当用户将鼠标悬停在某个项目上时，该项目上会显示更多的小 div。简单的。悬停时显示哪些 div 取决于用户在哪个页面上，因此它们取决于知道他们在哪个页面上。我使用一个简单的变量来解决这个问题。

我使用以下 js 来决定显示哪些 div。例如来自主页

<script>
  $(".list_item_image").mouseenter(function () {
    $(this).children(".gl_view2").show();
    $(this).children(".gl_relist").show();
  });
  $('.list_item_image').mouseleave(function() {
    $(this).children(".gl_view2").hide();
    $(this).children(".gl_relist").hide();
  });
</script>

最初加载 div（gl_view2 和 gl_relist），但带有 display:none;

现在，这个 js 被加载到页脚中，以确保它在有问题的 div 之后。

假设我设置了无限滚动来一次更新 15 个项目

对于前 15 个项目，这一切都完美地工作（意味着在 mouseenter 上应该显示/覆盖的 div 被显示），但之后项目加载但 mouseenter 根本不再工作。我猜这是因为js已经加载了，当下一个项目加载到页面上时，js没有任何效果。

要加载我正在使用的无限滚动的下一个项目：

<nav id="page_nav"><a href="/pages/infinScrollGather.html?page_offset=2&currentpage=homepage"></a></na‌v>

我也尝试在每个项目之后加载 js，但仍然只适用于前 15 个。

我也试过了，但这根本不起作用：

$("body").on("mouseenter", ".list_item_image", function () {
...
});

$("body").on("mouseleave", ".list_item_image", function () {
...
});

以前有没有人遇到过这样的事情？有什么解决办法吗？

【问题讨论】：

您的插件仍然对 href 中的 url 进行 ajax 调用以获取接下来的 15 个项目，对吗？您能否添加从该 ajax 调用中获得的响应示例？

标签： javascript jquery infinite-scroll

【解决方案1】：

您应该像这样使用带有on() 方法的事件委托

$("body").on("mouseenter", ".list_item_image", function () {
  ...
});

$("body").on("mouseleave", ".list_item_image", function () {
  ...
});

这会将您的处理程序也附加到稍后通过 ajax 在 DOM 上注入的较新元素上

仅当您使用旧版本的 jQuery 时才使用 delegate()，否则使用 on()

【讨论】：

恐怕现在根本不起作用 - 无限滚动不是使用 ajax 加载的，而是使用
@DarrenSweeney，您能否详细说明“未使用 ajax 加载”的含义。请分享无限加载的工作代码。如果它适用于前 15 个图像而不是接下来的 15 个图像，则通常意味着需要使用事件委托。另外，请详细说明什么不起作用。
你应该发布一个演示页面或一个简化的代码示例

【解决方案2】：

已修复（无论如何我希望如此）

似乎缺少 js 被包裹在：$(document).ready(function(){ ... });

感谢大家的帮助。

【讨论】：