Синтаксис JQuery - наведение не работает на страницах с бесконечной прокруткой

Я использую плагин бесконечной прокрутки ajax (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());
        });

person LeeTee    schedule 19.11.2013    source источник


Ответы (1)


Просто инициализируйте плагин Hover Caption для новых элементов после их загрузки, используя хук onRenderComplete в плагине Infinite Ajax Scroll.

Я настроил 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 для каждого элемента. Это какое-то странное ограничение — я бы не так написал плагин, но что там. Поэтому вам нужно убедиться, что каждый новый элемент, который вы загружаете, имеет уникальные data-target и id. В моем примере мне пришлось дополнительно манипулировать новыми элементами в хуке onLoadItems, чтобы дать им уникальные id, о которых вам не нужно беспокоиться.

person Nate    schedule 20.11.2013
comment
Это работает, но только на 2-й странице. На странице 3 и далее я сталкиваюсь с той же проблемой, когда она не применяется ... хммм .. - person LeeTee; 21.11.2013
comment
На самом деле ведет себя очень странно. Он не применяет наведение на 2-ю страницу элементов, пока не будет загружена 3-я страница. Элементы на 3-й странице не имеют наведения, пока не будет загружена 4-я страница. - person LeeTee; 21.11.2013
comment
Можете ли вы создать JSFiddle, который дублирует вашу проблему? Это значительно облегчило бы нам задачу устранения неполадок. - person Nate; 21.11.2013
comment
хорошо, спасибо за вашу помощь с этим. Я пытаюсь заставить бесконечную прокрутку работать без подкачки на стороне сервера в JSfiddle. Опубликую, если удастся заставить что-то работать :\ - person LeeTee; 21.11.2013
comment
Создание автономного примера оказалось довольно нетривиальным, поскольку, как вы сказали, он опирался на подкачку на стороне сервера. Это была интересная задача, поэтому я пошел дальше и сделал ее, используя интеграцию JSFiddle Gist, что действительно здорово. Я обновил свой ответ. Надеюсь, вы увидите, как работает этот пример, и используете его в качестве справочного материала, чтобы заставить работать свой собственный пример. - person Nate; 21.11.2013
comment
Это фантастично! Большое спасибо за ваши хлопоты и усилия! - person LeeTee; 22.11.2013
comment
Не за что. Удачи! - person Nate; 22.11.2013