jquery - 如何让 Isotope 与动态 DOM 节点一起工作？

我是 Backbone View 的上下文，我在 DOM 中添加和删除 View 。但是，包含同位素元素的容器仅在初始加载期间起作用；之后，当容器被移除并再次添加时，同位素不能按预期工作。

我在这里做了快速 JSfiddle:http://jsfiddle.net/mulderp/T8aSQ/6/ -->

当我添加同位素容器时:

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 不再运行，尽管 DOM 结构看起来与第一个相似。

任何人都知道会发生什么，以及如何让 Isotope 在第一次初始化期间读取新元素？

最佳答案

我前段时间偶然发现了同样的问题，如果你想在操作之间保持 Isotope 的动画，我是这样解决的:

在您的 remove 函数而不是 $container.html(''); 中写入:

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

在你的 create 函数中，而不是 $container.html(list); :

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

否则，如果您不需要操作之间的动画，您可以保持函数原样，只需在调用 shuffle 之前在创建函数中重新初始化 Isotope。

工作 fiddle :http://jsfiddle.net/T8aSQ/7/

关于jquery - 如何让 Isotope 与动态 DOM 节点一起工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14896464/