Jquery 脚本冲突或不工作

Question

在我的 prestashop 网站上，我添加了无限滚动脚本，它运行良好。这是代码：

<script type="text/javascript" src="/modules/infinitescroll/js/jquery.infinitescroll.dev.js"></script>
<script type="text/javascript" src="/modules/infinitescroll/behaviors/masonry-isotope.js"></script>

<script type="text/javascript">
    infinite_scroll = {"loading":{"msgText":"","finishedMsg":"<em>No additional posts.<\/em>","img":"http:\/\/demo.boonex.com\/templates\/base\/images\/loading.gif"},"nextSelector":"#pagination_next > a","navSelector":".pagination","itemSelector":"#tiles > li","contentSelector":"#tiles","debug":true,"behavior":"masonry","callback":""};
        infinite_scroll.maxPage = 8;
        jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(newElements, data, url) { eval(infinite_scroll.callback); });
</script>

以上脚本适用于 INFINITY SCROLLER：

所以我的问题是

我有这个简单的 jquery 代码：

<script type="text/javascript">

    $(document).ready(function () {
        $(".item").hover(function () {
            $(this).find(".over").fadeToggle(1);
            return false;
        });
    });

</script>

它会对每个产品产生简单的悬停效果。它只在第一页上工作，在我向下滚动并且 Infinity scoller 脚本开始工作后，我的 HOVER 代码不再工作了。

那么为什么会这样呢？我该如何解决这个问题？

PS：我已经从 HEAD 中删除了所有额外的 javascript 插件...

这是 CONSOLE 显示的内容：

滚动前：

滚动后：

Answer 1

滚动后似乎动态生成的内容没有绑定悬停事件。

使用委托绑定悬停事件：

$('#mainContainer').on('mouseenter', '.item', function(){
  $(this).find(".over").fadeToggle(1);
   return false;
});

然后在 mouseleave 上反转上面的代码。

Answer 2

将事件委托给静态父元素。

$(document).on('mouseover', '.item', function () {
    $(this).find(".over").fadeToggle(1);
    return false;
});