jQuery語法-懸停不適用於無限滾動頁面

Question

我正在使用infinite-ajax-scroll插件（ https://github.com/webcreate/infinite-ajax-scroll ）和Hover Caption插件（ http://ryun.github.io/HCaptions/ ）。 懸停效果在第一頁上效果很好，但是不適用於通過無限滾動插件加載的頁面。

我已經讀過使用.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>

hcaption.js中可能需要覆蓋的代碼部分：

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

Answer 1

加載新元素后，只需使用Infinite Ajax Scroll插件中的onRenderComplete鈎子在新元素上初始化Hover Caption插件即可。

我已經建立了一個JSFiddle和Gist來模擬無限滾動和HCaptions，以向您展示我的意思。

http://jsfiddle.net/nate/9JGTV/1/

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

有兩件事要注意：

• 您必須使用onRenderComplete ，而不是onLoadItems ，否則hcaptions將無法正常工作。 我懷疑該插件會根據其使用的項目的渲染大小進行計算，這意味着如果在DOM中觸發它之前這些大小是錯誤的。

• hcaptions依賴於每個項目的唯一id 。 那是一個奇怪的限制-不是我編寫插件的方式，而是whatevs。 因此，您需要確保加載的每個新項目都具有唯一的data-target和id 。 在我的示例中，我不得不對onLoadItems掛鈎中的新項目進行一些額外的操作，以便為它們提供唯一的id ，您無需擔心。