0

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

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

4

2 回答 2

1

on()你应该像这样使用事件委托

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

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

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

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

于 2012-08-27T09:40:09.663 回答
0

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

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

感谢所有帮助。

于 2012-08-27T11:22:35.247 回答