Cubic Portfolio插件加载更多按钮回调及初始化报错求助

我一眼就看到了问题所在，你犯了两个关键的小错误，咱们一步步来修正：

第一个错误：调用appendItems的对象不对 #

你在自定义点击函数里，给加载更多按钮（#js-single-more）调用了cubeportfolio('appendItems')，但这个方法必须在初始化插件的容器元素（也就是你代码里的$cubesingle，对应#js-grid-single）上执行。按钮本身并没有被初始化Cubic Portfolio实例，所以才会报"not initialized"的错。

把这行错误代码：

jQuery("#js-single-more").cubeportfolio('appendItems',data);

改成：

$cubesingle.cubeportfolio('appendItems', data);

（或者直接用jQuery("#js-grid-single").cubeportfolio('appendItems',data);，效果一致）

第二个错误：重复绑定点击事件引发冲突 #

你已经在插件初始化时配置了loadMore: '#js-single-more'和loadMoreAction: 'click'，这时候插件已经自动监听了这个按钮的点击事件。你再手动绑定一个click事件，会导致两次触发AJAX请求，甚至干扰插件的内部状态，这也是报错的诱因之一。

正确的做法是用插件官方提供的loadMoreCallback回调，代替自定义点击事件，这样能完美融入插件的加载逻辑：

修改后的完整初始化代码 #

var $cubesingle = $('#js-grid-single'); 
$cubesingle.cubeportfolio({ 
  filters: '#js-single-filter', 
  loadMore: '#js-single-more', 
  loadMoreAction: 'click', 
  // 添加官方加载更多回调，替代自定义点击事件
  loadMoreCallback: function() {
    var pluginInstance = this; // 拿到当前插件实例
    $.ajax({
      type: 'POST',
      url:'/ajaxImages/',
      dataType: 'html',
      data: {
        'nImages': $('div.cbp-item').length,
        'csrfmiddlewaretoken': csrf
      },
      success: function (data) {
        // 用插件实例调用appendItems，确保上下文正确
        pluginInstance.appendItems(data);
        // 加载完成后更新布局，保证新元素正确排列
        pluginInstance.updateLayout();
      },
      error: function() {
        // 加载失败时，告诉插件停止加载状态
        pluginInstance.loadMoreDone(false);
        alert('加载失败，请稍后重试');
      }
    });
    // 返回false，阻止插件默认的加载逻辑（因为我们用了自定义AJAX）
    return false;
  },
  // 以下是你原有的配置，保持不变
  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) { 
    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) {
  // ...你的AJAX代码
});

这样修改后，既能利用插件自带的加载更多状态管理（比如切换"LOADING..."文字），又能通过自定义AJAX获取内容并正确追加，不会再出现初始化相关的报错了。

内容的提问来源于stack exchange，提问作者Rahul