让同位素在AJAX装载的容器上工作

Question

我用同位素来设计一个页面上的一些区块。我的页面HTML结构可以简化如下：

<nav>
    <a href="/page1.htm">Page 1</a>
    <a href="/page1.htm">Page 1</a>
    <a href="/page1.htm">Page 1</a>
</nav>
<div class="main-content-container">
    <div class="main-content">
        <div class="blocks">
            <div class="block">Block 1</div>
            <div class="block">Block 2</div>
            <div class="block">Block 3</div>
            <div class="block">Block 4</div>
            <div class="block">Block 5</div>
        </div>
    </div>
</div>

同位素是这样初始化的(我使用的是jQuery)：

$(function(){
    var container = $('.blocks');
    container.isotope({
        itemSelector: '.block',
        masonry: {
            columnWidth: 220,
            gutter: 20
        },
        itemPositionDataEnabled: true
    });
});

这工作得很好。

不过，我想从不同的网页中提取内容，其结构完全相同，并将其用作“同位素内容”。

我像这样加载内容，使用jQuery load()

$('nav a').click(function(){
    var link = $(this).attr('url');
    $('.main-content-container').load(link + ' .main-content', function () {

        // Content loaded, so re-init Isotope:
        container.isotope({
            itemSelector: '.block',
                masonry: {
                    columnWidth: 220,
                    gutter: 20
                },
            itemPositionDataEnabled: true
        });

    });
});

同样，这在将内容从外部页面加载到当前页面时非常有效。它只是替换了main-content容器中的所有东西，这正是我想要的。然而，重新初始化同位素只是不起作用。它没有错误，它只是没有做任何事情。

在加载AJAX内容之前，我尝试过在click上对同位素实例执行一个destroy。我还尝试过在同步AJAX成功回调中重新初始化同位素(而不是异步的，这正是load所做的)。

什么都不起作用，我不能举这样的例子，在AJAX中要替换同位素容器，只是替换其中的内容。我之所以要替换整件东西，是因为它里面有更多的内容(过滤器等)，需要加载它。

有人能给我建议一下该怎么做吗？

非常感谢。

Answer 1

你必须重新抓取你的目标元素，你不能再重复使用container，它不知道新加载的elems！

$('.main-content-container').load(link + ' .main-content', function () {

    // Content loaded, so re-init Isotope:
    container = $(".blocks"); //grab newly loaded elems
    container.isotope({
        itemSelector: '.block',
            masonry: {
                columnWidth: 220,
                gutter: 20
            },
        itemPositionDataEnabled: true
    });

});