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

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

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

Answer 2

滚动未绑定悬停事件后，

似乎是动态生成的内容。

使用委托绑定悬停事件：

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

并在mouseleave上反转上面的代码。