jquery - 附加项目时同位素不会重新布局

我正在尝试通过Rails上的ajax请求将新项目追加到容器中(下面提供jsfiddle及其解释)

我写的我的js响应是

var $newthumbs = "..new items..";
$('#homepage_thumbnails').append( $newthumbs );
$('#homepage_thumbnails').isotope( 'appended', $newthumbs );

一旦添加了新项目，我似乎就会遇到某种问题。
一旦附加了这些项目，同位素似乎就不会激发，我剩下的是最初被同位素化的项目和没有被同位素化的新项目。

这是我所拥有的一个例子(我得到了几个同位素，然后又是几个新的未同位素的同位素)

<div id="homepage_thumbnails" class="thumbnails isotope" style="position: relative; overflow: hidden; height: 720px;">
<div class="thumbnail-item isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 480px, 0px);">
...
</div>
<div class="thumbnail-item thumbnail span2">
    ...
</div>
</div>

请注意$('#homepage_thumbnails').isotope( 'insert', $newthumbs );也会发生

这里发生了什么？

更新

似乎同位素以某种方式被卡住了..因为如果我在其后加上alert('test')，它将不会被发射。如果我将警报置于同位素调用之前，则警报会被触发...嗯，帮助

更新2

我做了一个jsfiddle来显示问题。这很简单，但是我认为问题也很简单-我只是错过了一些重要的东西。

jsfiddle解释以及它与我的原始问题的关系:

在jsfiddle上有2个类-item和red-item。具有透明背景的3个项目的简单布局(以更好地显示问题)。单击clickme后，new-item应通过附加加入该组，然后与同位素重新混合。看到的结果是red-item在第一个item之下，并且没有被同位素化。通过检查可以看出，这与我的原始问题相同，即原始项目被同位素化，而新添加的项目却没有。

希望我说清楚了，希望有人能够帮助我并证明我理智。谢谢你。

更新3

解决方案(部分)是用$()吞噬newthumbs，就像这样

var $newthumbs = $("..new items..");

但是我仍然有一个问题。

在这个jsfiddle上，我已经添加了解决方案，make使得每次都添加2 div。

在此broken fiddle上，我已将divs相似之处添加到渲染助手在Rails上的工作方式，并添加了\n\t等。这似乎不起作用。

我试图弄清楚如何使其工作..

最佳答案

我和你有同样的问题，我用你的 fiddle 来寻找解决方案。我认为问题在于，在附加新项目之后，您需要为同位素提供对这些插入项目的引用。

http://jsfiddle.net/cR7WP/

当你说:
element.append( '<div />' ).isotope( 'appended', $('<div />') )
创建了两个单独的div元素；一个实际上是附加的，另一个是碎片，同位素试图对其进行布局。附加的div永远不会传递给布局函数。

关于jquery - 附加项目时同位素不会重新布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14011015/