无限滚动JavaScript已经解雇了 [英] infinite scroll javascript already fired

问题描述

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

I have a site which loads items and uses the jquery infinite scroll plug in to load more items as a user scrolls.

当用户将鼠标悬停在某个项目上时，在项目上显示更多小div。简单。悬停时显示哪些div取决于用户所在的页面，因此它们取决于知道它们所在的页面。我使用一个简单的变量对其进行排序。

When a user hovers over an item, more small divs are shown over the item. Simple. Which divs are shown on hover depends on which page a user is on, therefore they are dependant on knowing which page they are on. I use a simple variable to sort that out.

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

I use the following js to decide which divs are shown. eg from homepage

<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），但显示： none;

The divs (gl_view2 & gl_relist) are initially loaded but with display:none;

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

Now, this js is loaded into the footer to ensure its after the divs in question.

让我说我有无限滚动设置一次更新15个项目

Lets say I have infinite scroll set to update 15 items at a time

这一切都很完美（意味着在mouseenter上应该显示的div前15个项目显示/覆盖，但是之后项目加载但是鼠标中心根本不再起作用。我猜这是因为js已加载，当下一项加载到页面上时，js没有任何效果。

This all works perfectly (meaning on mouseenter the divs which should be shown/overlaid, are shown) for the first 15 items, but after that the items load but the mouseenter simply does not work anymore. I'm guessing this is because the js has loaded and when the next items are loaded onto the page the js doesn't have any effect.

加载下一项我正在使用无限滚动：

To load the next items with infinite-scroll I am using:

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

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

I've also tried loading the js in after each item but still only works for the first 15.

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

I have also tried but this didn't work at all:

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

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

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

Has anyone come across anything like this before? Any ideas for a fix?

推荐答案

你应该在（）的事件委托$ c>类似的方法

you should use event delegation with on() method like so

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

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

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

this will attach your handlers also on newer elements injected later on the DOM via ajax

只有在使用旧版本的jQuery时才使用 delegate（）， on（）否则

only if you are using an older version of jQuery use delegate(), on() otherwise

这篇关于无限滚动JavaScript已经解雇了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！