cubic插件中加载更多按钮的回调函数

Question

我正在使用立方体投资组合插件，并希望动态加载更多的元素，因为用户点击加载更多的button。

它确实指定了像loadMore: 'selector'，loadMoreAction:'Click'这样的选项。

但是我似乎找不到load more click回调函数。

因此，我使用自己的click函数从使用ajax的服务器以html的形式加载更多的元素，我已经使用了：

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

来追加元素，但它给出了错误cubicportfolio is not initialized。

但是它已经内化了。

初始化cubic包：

     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!');
                });
        }

    });

我自己的'click‘函数来加载元素：

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

这一行为触发了所有内置的“加载更多”行为，您可以通过单击获得这些行为。