Question

我有一个网站加载项目并使用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＆amp; 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 () {
...
});

之前有没有人遇到这样的事情？有任何修复的想法吗？

Answer 1

您应该使用on()方法使用事件委托

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

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

这会将处理程序附加到稍后通过ajax

注入DOM的新元素上

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

Answer 2

修正（我希望如此）

似乎js丢失了：$(document).ready(function(){ ... });

感谢您的帮助。

无限滚动JavaScript已经解雇了

2 个答案: