无限滚动JavaScript已经被解雇了

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

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

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

 $(".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(); });  

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

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

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

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

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

我也尝试在每个项目后加载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(){ ... });

谢谢你的帮助。