jquery - 让 Isotope 在 AJAX 加载的容器上工作

Question

我正在使用同位素来布局页面上的某些 block 。我的页面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 内容之前对 Isotope 实例执行 destroy 操作。我还尝试过在同步 AJAX 成功回调中重新初始化 Isotope(而不是 load 所做的异步方式。

没有任何效果，而且我无法在 AJAX 中替换同位素容器的情况下使用任何类似的示例，只能替换其中的内容。我替换整个内容的原因是因为其中有更多内容(过滤器等)需要加载。

有人可以建议如何让它工作吗？

非常感谢。

Answer 1

您必须重新获取目标元素，您无法再次重复使用容器，它不知道新加载的元素!

$('.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
    });

});