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

Question

我正在尝试通过 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我已经添加了解决方案，并且每次都会添加 2 个 div。

关于这个broken fiddle我添加的 div 类似于渲染助手在 Rails 上的做法，其中添加了\n\t 等等。这似乎不起作用。

我正在想办法让它发挥作用..

Answer 1

我遇到了和你一样的问题，我用你的 fiddle 找到了解决方案。我认为问题在于，在添加新项目后，您需要为 isotope 提供对这些插入项目的引用。

http://jsfiddle.net/cR7WP/

当你说:

element.append( '<div />' ).isotope( 'appended', $('<div />') )

创建了两个独立的 div 元素；一个是实际附加的，一个是同位素尝试布局的片段。附加的 div 永远不会传递给布局函数。