How to get Isotope working with dynamic DOM nodes?

Question

I the context of Backbone views, I add and remove views in the DOM. However, the container that contains Isotope elements only works during the initial load; after that, when the container is removed, and added again, Isotope is not working as expected.

I did quick JSfiddle here: http://jsfiddle.net/mulderp/T8aSQ/6/ -->

When I add the Isotope container:

var list = '<div data-foo="bar" id="container"><div class="item red"></div><div class="item blue"></div></div>';
$container.html(list);
$container.isotope('shuffle');

Isotope is not running anymore, although the DOM structure would look similar to the first.

Anyone has an idea what happens, and how to have Isotope read the elements a new as during the first initialization?

Answer 1

I stumbled upon the same issue some time ago, and I resolve it in this way, if you want to keep Isotope's animation between operations:

In your remove function instead of $container.html(''); write:

var elToRemove = $container.data('isotope').$filteredAtoms;
$container.isotope('remove',elToRemove);

And in your create function, instead of $container.html(list);:

$container.isotope('insert',$(list));

Otherwise if you don't need animation between operations you could keep your functions as they are and just re-initialize Isotope in you create function before calling shuffle.

Working fiddle: http://jsfiddle.net/T8aSQ/7/