JQuery语法-悬停在无限滚动页面上不起作用

我正在使用无限ajax滚动插件（）和悬停标题插件（）。悬停效果在第一个页面上运行良好，但是它不适用于通过无限滚动插件加载的页面

我已经读到使用.on（）而不是.hover（）应该可以工作，并且还尝试了.scroll（）事件。然而，如果不修改插件中的代码，我似乎无法使任何东西正常工作，这是不理想的

我应该检测到什么事件来激活hcaption插件，我该如何编写它

我的代码如下：

<script>

$(document).ready(function () {

     //hcaptions for mouseover tiles  
     $('.hcaption').hcaptions({
         effect: "slide",
         direction: "bottom"
     });

     //isotope
     var $container = $('#container'),
         filters = {};
     $container.isotope({
         itemSelector: '.element, .element_tile',

     });    

     // Infinite Ajax Scroll configuration
     jQuery.ias({
         container: '#main', // main container where data goes to append
         item: '.element', // single items
         pagination: '.paginate', // page navigation
         next: '.paginate a', // next page selector
         loader: '<img src="public/img/ajax-loader.gif"/>', // loading gif
         loaderDelay: 200,
         thresholdMargin: -600,
         noneleft: 'No more discounts', //Contains the message to be displayed when there are no more pages left to load
         triggerPageThreshold: '10', // show "load more" if scroll more than this to stop
         trigger: "",
         onLoadItems: function (newElements) {
             // hide new items while they are loading
             var $newElems = $(newElements).css({
                 opacity: 0
             });
             // ensure that images load before adding to isotope layout
             $newElems.imagesLoaded(function () {
                 // show elems now they're ready
                 $newElems.animate({
                     opacity: 1
                 });
                 $container.isotope('insert', $newElems, true);
             });
             return true;
         }
     });
 });

 </script>

---

加载新元素后，只需使用无限Ajax滚动插件中的

onRenderComplete

hook在新元素上初始化悬停标题插件

我已经设置了一个JSFIDLE和Gist来模拟无限卷轴和HCaptions，向您展示我的意思

$（'.hcaption'）.hcaptions（）；
var迭代器=0；
美元国际会计准则({
容器：'.listing'，
项目：“.post”，
分页：'.navigation'，
next:'。next发布了一个'，
触发页面阈值：10，
//你不应该需要这个！这纯粹是为了
//可以在JSFIDLE上查看重复页面，
//因为每个hcaption都需要一个唯一的ID。
onLoadItems：函数（项）{
$（项目）。每个（功能（i，项目）{
$（项）。查找（“.hcaption”）
.removeAttr（'data-target'））
.attr（'data-target'，'tog-'+迭代器）；
$（项）。查找（“.cap overlay”）
.removeAttr（'id'））
.attr（'id'，'tog-'+迭代器）；
迭代器+=1；
});
},
//这是重要的一点--
//重新初始化新项目的hcaptions。
onRenderComplete:函数（项）{
$（items.find（'.hcaption'）.hcaptions（）；
},
加载程序：“”
});

有两件重要的事情需要注意：

• 您必须使用

  onRenderComplete

  ，而不是

  onLoadItems

  ，否则hcaption将无法正常工作。我怀疑插件根据它使用的项目的渲染大小进行计算，这意味着如果它在DOM中之前被触发，那么这些大小是错误的

• hcaption依赖于每个项目的唯一

  id

  s。这是一种奇怪的限制——这不是我编写插件的方式，而是什么。因此，您需要确保加载的每个新项目都有一个唯一的

  数据目标

  和

  id

  。例如，我必须在

  onLoadItems

  钩子中对新项进行一些额外的操作，以使它们具有唯一的

  id

  s，您不必担心

---

这只适用于第二页。在第3页之后，我遇到了同样的问题，它没有被应用……嗯……实际上它的行为非常奇怪。在加载第三页之前，它不会在项目的第二页上应用悬停。在第4页加载之前，第3页上的项目没有悬停。您可以创建一个复制您的问题的JSFIDLE吗？这将使我们更容易帮助您排除故障。好的，谢谢您的帮助。我试图让无限卷轴在JSFIDLE中不使用服务器端分页的情况下工作。如果你能设法让一些东西工作起来，你会发帖吗：\n制作一个独立的例子被证明是非常重要的，因为正如你所说，它依赖于服务器端分页。这是一个有趣的挑战，所以我继续使用JSFiddle的Gist集成完成了它，这真的很酷。我已经更新了我的答案。希望您能看到这个示例正在运行，并将其用作参考，使您自己的示例能够运行。

        $target.css('z-index',opts.zindex+1).hide();
        $wrap.hover(function () {
            $target.stop(true, true).fadeIn(+opts.speed, opts.onshow());
        }, function () {
            $target.stop(true, true).fadeOut(+opts.speed, opts.onhide());
        });

$('.hcaption').hcaptions();

var iterator = 0;

$.ias({
    container : '.listing',
    item: '.post',
    pagination: '.navigation',
    next: '.next-posts a',
    triggerPageThreshold: 10,

    // You should not need this! This is purely to make
    // it possible to view repeated pages on JSFiddle,
    // since each hcaption requires a unique ID.
    onLoadItems: function (items) {
        $(items).each(function (i, item) {
            $(item).find('.hcaption')
              .removeAttr('data-target')
              .attr('data-target', 'tog-' + iterator);

            $(item).find('.cap-overlay')
              .removeAttr('id')
              .attr('id', 'tog-' + iterator);

            iterator += 1;
        });
    },

    // This is the important bit --
    // reinitialize hcaptions on the new items.
    onRenderComplete: function (items) {
        $(items).find('.hcaption').hcaptions();
    },
    loader: '<img src="http://placehold.it/100x50/333333/ffffff/&text=LOADING..."/>'
});