destroy & re-initialize, ._init is not a function

[nusoft]

Hi, my website shows photos like this CodePen, but with photos from a remote source: https://codepen.io/desandro/pen/eRRQVo

Now I would like to add a button which will 'refresh' the InfiniteScroll instance, to show newly added photos from the remote source. I tried with $container.infiniteScroll('destroy') and reinitializing InfiniteScroll, but that gives an error Uncaught TypeError: o._init is not a function

Any ideas? Thanks in advance!

[desandro]

Thanks for reporting this issue. Could you post the code you're using, where you're triggering destroy then initializing a new instance? Or a live URL, or even better a reduced test case? See Submitting Issues in the contributing guidelines.

[nusoft]

Hi, thanks for your reply. I added my code to your pen (I tried 2 different methods): https://codepen.io/anon/pen/aKMzLa

[desandro]

Thanks for that. You should be able to re-initialize both Infinite Scroll and Masonry by first destroying both plugin instances

$(document).on("click", ".reload", function(e) {
  $grid.infiniteScroll('destroy');
  $grid.masonry('destroy');
  initMasonry();
});

See demo https://codepen.io/desandro/pen/ab2cc8162dde24c18ff12caf360d6186

However, there currently is a bug that doesn't properly remove jQuery data on destroy. I've added a fix for this that will be in the next release. Until then, you can this duck punch

// duck punch
var destroy = InfiniteScroll.prototype.destroy;
InfiniteScroll.prototype.destroy = function() {
  destroy.apply( this, arguments );
  // remove jQuery data
  if ( jQuery && this.$element ) {
    jQuery.removeData( this.element, 'infiniteScroll' );
  }
};

[nusoft]

Awesome! Thanks a lot!

[desandro]

Infinite Scroll v3.0.5 has been released.