如何获得同位素动态DOM节点的工作？ [英] How to get Isotope working with dynamic DOM nodes?

问题描述

我的意见骨干的背景下，我添加和删除DOM中的意见。然而，只包含同位素元素的容器初始加载期间的工作;在这之后，当容器被除去，再次加入同位素不工作正常。

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.

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

I did quick JSfiddle here: 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 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?

推荐答案

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

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:

在您删除的功能，而不是 $ container.html（''）; 写：

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

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

而在你创造的功能，而不是 $ container.html（表）; ：

$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.

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

这篇关于如何获得同位素动态DOM节点的工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！