如何让同位素与动态 DOM 节点一起工作？

【问题标题】：How to get Isotope working with dynamic DOM nodes?如何让同位素与动态 DOM 节点一起工作？
【发布时间】：2013-02-15 14:06:22
【问题描述】：

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

我在这里做了快速的 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 在第一次初始化期间读取新元素？

【问题讨论】：

标签： jquery backbone.js jquery-masonry jquery-isotope

【解决方案1】：

前段时间我偶然发现了同样的问题，如果你想在操作之间保持同位素的动画，我会以这种方式解决它：

在你的删除函数而不是$container.html(''); 中写：

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

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

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

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

工作小提琴：http://jsfiddle.net/T8aSQ/7/

【讨论】：

是的，这很好用！谢谢。所以，我认为信息是 Isotope DOM 元素不应该被破坏，而应该被清空。
是的，你必须使用Isotope的方法来管理它的内容，否则你必须重新初始化它。