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

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

在 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');

同位素不再运行,尽管 DOM 结构看起来与第一个类似。

有人知道会发生什么,以及如何让 Isotope 在第一次初始化期间读取新的元素吗?

最佳答案

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

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

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

并在您的创建函数中,而不是$container.html(list);:

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

否则,如果您不需要操作之间的动画,您可以保持函数不变,并在调用 shuffle 之前在创建函数中重新初始化同位素。

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

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

相关文章:

javascript - 在查询中使用 Replace with 替换多个元素

javascript - 在 Backbone 中,model.get ('foo' ) 和 model.attributes.foo 之间有什么区别吗?

jquery - 从 jQuery 脚本中的 TOP 和 LEFT 值中减去像素

jquery - 为什么 JQuery Masonry 不垂直对齐?

JQuery Masonry 不刷新容器高度

javascript - 切换/隐藏 div JQuery

javascript - 脚本标签调用的 JQuery 选择器

javascript - 如何从javascript中的url中删除查询字符串数组

jquery - 当一组字段失去焦点时触发 Backbone 事件

javascript - 尝试集成phonegap 3.0和主干时数据未加载