функция обратного вызова для загрузки кнопки «больше» в плагине кубического портфеля

Question

Я использую плагин кубического портфеля и хочу динамически загружать больше элементов, когда пользователь нажимает на кнопку загрузки. Больше button.

он указывает такую ​​опцию, как loadMore: 'selector', loadMoreAction:'Click'.

но я не могу найти загрузку more click call Back function.

, поэтому я поставил свою собственную функцию click для загрузки большего количества элементов в виде html с сервера, используя ajaxи я использовал:

jQuery("#grid-container").cubeportfolio('appendItems','your HTML element);

, чтобы добавить элементы, но это дает мне ошибку cubicportfolio is not initialized.

, но оно уже инициализировано

инициализация кубического портфеля:

     var $cubesingle = $('#js-grid-single');
    $cubesingle.cubeportfolio({
        filters: '#js-single-filter',
        loadMore: '#js-single-more',
        loadMoreAction: 'click',
        layoutMode: 'grid',
        mediaQueries: [{
            width: 1500,
            cols: 4
        }, {
            width: 1100,
            cols: 3
        }, {
            width: 800,
            cols: 3
        }, {
            width: 670,
            cols: 2
        }, {
            width: 320,
            cols: 1
        }],
        defaultFilter: '*',
        animationType: 'quicksand',
        gapHorizontal: 15,
        gapVertical: 15,
        gridAdjustment: 'responsive',
        caption: 'fadeIn',
        displayType: 'sequentially',
        displayTypeSpeed: 100,

        // singlePage popup
        singlePageDelegate: '.cbp-singlePage',
        singlePageDeeplinking: true,
        singlePageStickyNavigation: true,
        singlePageCounter: '<div class="cbp-popup-singlePage-counter">{{current}} of {{total}}</div>',
        singlePageCallback: function(url, element) {
            // to update singlePage content use the following method: this.updateSinglePage(yourContent)
            var t = this;

             $.ajax({
                    url: url,
                    type: 'GET',
                    dataType: 'html',
                    timeout: 30000
                })
                .done(function(result) {
                    t.updateSinglePage(result);
                })
                .fail(function() {
                    t.updateSinglePage('AJAX Error! Please refresh the page!');
                });
        }

    });

моя собственная функция "щелчка" для загрузки элемента:

    $('#js-single-more').on('click',function (event) {
    console.log('clicked');
    $.ajax({
       type: 'POST',
       url:'/ajaxImages/',
       dataType: 'html',
       data: {
           'nImages': $('div.cbp-item').length,
           'csrfmiddlewaretoken': csrf
       },
       success: function (data) {
           console.log(data);
           //$('.cbp-wrapper').append(data);
           jQuery("#js-single-more").cubeportfolio('appendItems',data);

           //console.log($('#card'));
       }
   });
});

html:

  <div id="js-grid-single" class="cbp cbp-l-grid-inline light-gallery cbp-caption-active cbp-caption-fadeIn cbp-ready" style="height: 262px;"><div class="cbp-wrapper-outer"><div class="cbp-wrapper">

        <div class="cbp-item identity package" style="width: 380px; left: 0px; top: 0px;"><div class="cbp-item-wrapper"> <a class="cbp-caption cbp-singlePage">
          <div class="cbp-caption-defaultWrap"> <img src="/media/p1.jpg" alt=""> </div>
          <div class="cbp-caption-activeWrap">
            <div class="cbp-l-caption-alignCenter">
              <div class="cbp-l-caption-body">
                <p>img_1</p>
              </div>
            </div>
          </div>
          </a> </div></div>

        <div class="cbp-item package video" style="width: 380px; left: 395px; top: 0px;"><div class="cbp-item-wrapper"> <a class="cbp-caption cbp-singlePage">
          <div class="cbp-caption-defaultWrap"> <img src="/media/p2.jpg" alt=""> </div>
          <div class="cbp-caption-activeWrap">
            <div class="cbp-l-caption-alignCenter">
              <div class="cbp-l-caption-body">
                <p>img_2</p>
              </div>
            </div>
          </div>
          </a> </div></div>

        <div class="cbp-item identity package video" style="width: 380px; left: 790px; top: 0px;"><div class="cbp-item-wrapper"> <a class="cbp-caption cbp-singlePage">
          <div class="cbp-caption-defaultWrap"> <img src="/media/p3.jpg" alt=""> </div>
          <div class="cbp-caption-activeWrap">
            <div class="cbp-l-caption-alignCenter">
              <div class="cbp-l-caption-body">
                <p>img_3</p>
              </div>
            </div>
          </div>
          </a> </div></div>

      </div></div></div>
    <div class="space30"></div>
    <div id="js-single-more" class="text-center"> 
        <a  class="cbp-l-loadMore-link btn" rel="nofollow">
            <span class="cbp-l-loadMore-defaultText">LOAD MORE</span> 
            <span class="cbp-l-loadMore-loadingText">LOADING...</span> 
            <span class="cbp-l-loadMore-noMoreLoading">NO MORE WORKS</span> 
        </a>
    </div>

Answer 1

Действительно простой способ - получить доступ к самому классифицированному элементу '.cbp-loadMore-link':

$('.cbp-l-loadMore-link').click();

Это ведет к запуску всего встроенного поведения «load-more», которое вы получаете склик.