Events

Event binding

jQuery event binding

Bind events with jQuery with standard jQuery event methods .on(), .off(), and .one().

// jQuery
var $grid = $('.grid').isotope({...});

function onArrange() {
  console.log('arrange done');
}
// bind event listener
$grid.on( 'arrangeComplete', onArrange );
// un-bind event listener
$grid.off( 'arrangeComplete', onArrange );
// bind event listener to be triggered just once. note ONE not ON
$grid.one( 'arrangeComplete', function() {
  console.log('arrange done, just this one time');
});

jQuery event listeners have an event argument, whereas vanilla JS listeners do not.

// jQuery, has event argument
$grid.on( 'arrangeComplete', function( event, filteredItems ) {
  console.log( filteredItems.length );
});

// vanilla JS, no event argument
iso.on( 'arrangeComplete', function( filteredItems ) {
  console.log( filteredItems.length );
});

Vanilla JS event binding

Bind events with vanilla JS with .on(), .off(), and .once() methods.

// vanilla JS
var iso = new Isotope( '.grid', {...});

function onArrange() {
  console.log('arrange done');
}
// bind event listener
iso.on( 'arrangeComplete', onArrange );
// un-bind event listener
iso.off( 'arrangeComplete', onArrange );
// bind event listener to be triggered just once
iso.once( 'arrangeComplete', function() {
  console.log('arrange done, just this one time');
});

Isotope events

arrangeComplete

Triggered after .isotope({...})/arrange, when all layout, hide, and reveal transitions have completed.

// jQuery
$grid.on( 'arrangeComplete', function( event, filteredItems ) {...} )
// vanilla JS
iso.on( 'arrangeComplete', function( filteredItems ) {...} )

filteredItems Array of Isotope.Items Items that are visible

$grid.on( 'arrangeComplete',
  function( event, filteredItems ) {
    console.log( 'Isotope arrange completed on ' +
      filteredItems.length + ' items' );
  }
);

layoutComplete

Triggered after a layout and all positioning transitions have completed.

// jQuery
$grid.on( 'layoutComplete', function( event, laidOutItems ) {...} )
// vanilla JS
iso.on( 'layoutComplete', function( laidOutItems ) {...} )

laidOutItems Array of Isotope.Items Items that were laid out

$grid.on( 'layoutComplete',
  function( event, laidOutItems ) {
    console.log( 'Isotope layout completed on ' +
      laidOutItems.length + ' items' );
  }
);

removeComplete

// jQuery
$grid.on( 'removeComplete', function( event, removedItems ) {...} )
// vanilla JS
iso.on( 'removeComplete', function( removedItems ) {...} )

Triggered after an item element has been removed.

removedItems Array of Isotope.Items Items that were removed

$grid.on( 'removeComplete',
  function( event, removedItems ) {
    console.log( 'Removed ' + removedItems.length + ' items' );
  }
);