当前位置 : 主页 > 网页制作 > JQuery >

jquery – 如何让Isotope使用动态DOM节点?

来源:互联网 收集:自由互联 发布时间:2021-06-15
我是Backbone视图的上下文,我在DOM中添加和删除视图.但是,包含Isotope元素的容器仅在初始加载期间起作用;之后,当容器被移除并再次添加时,Isotope不能按预期工作. 我在这里做了快速JSfidd
我是Backbone视图的上下文,我在DOM中添加和删除视图.但是,包含Isotope元素的容器仅在初始加载期间起作用;之后,当容器被移除并再次添加时,Isotope不能按预期工作.

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

当我添加Isotope容器时:

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在第一次初始化期间读取新元素?

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

在你的删除函数而不是$container.html(”);写:

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

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

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

否则,如果您不需要在操作之间进行动画,则可以按原样保留函数,并在调用shuffle之前在创建函数中重新初始化Isotope.

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

网友评论