同位素 ajax 内容加载答案

【问题标题】：Istotope ajax content load同位素 ajax 内容加载
【发布时间】：2016-06-21 14:30:12
【问题描述】：

我被困在使用同位素砌体布局的 WordPress 中加载下一组帖子。它只是没有为附加元素触发，我不知道为什么。如果有人能指出我正确的方向，我将不胜感激。

jQuery AJAX 函数

function load_content( args ) {

        $container = $('#container-async');
        $status    = $('.status');

        $.ajax({
            url: ajax_url,
            data: {
                action: 'do_load_posts',
                nonce: nonce,
                args: args
            },
            type: 'post',
            dataType: 'json',
            success: function( data, textStatus, XMLHttpRequest ) {

                $items = data.posts;

                if ( args.action === 'filter') {
                    /**
                     * Replace items
                     */
                    $container.imagesLoaded( function() {
                        $container.isotope({
                            itemSelector: '.grid-item',
                            percentPosition: true,
                            masonry: {
                                columnWidth: '.grid-sizer'
                            }
                        });
                        $container.html( $items ).isotope( 'appended', $items, function() {
                            console.log('inserted');
                        });
                    });
                }
                else {
                    /**
                     * Append items
                     */
                    $container.imagesLoaded( function() {
                        $container.isotope({
                            itemSelector: '.grid-item',
                            percentPosition: true,
                            masonry: {
                                columnWidth: '.grid-sizer'
                            }
                        });
                        $container.append( $items ).isotope( 'appended', $items, function() {
                            console.log('appended');
                        });
                    });
                }
            },
            error: function( MLHttpRequest, textStatus, errorThrown ) {
                $status.toggleClass('active');
            }
        });
}

WordPress AJAX：

function ajax_do_load_posts() {

    // Verify nonce
    if( !isset( $_POST['nonce'] ) || !wp_verify_nonce( $_POST['nonce'], 'nonce' ) )
        die('Permission denied');

    $response = [
        'status' => 500,
        'posts'  => 0,
    ];

    $filter = $_POST['args'];

    $type   = get_post_type_object( $filter['type'] );
    $args   = [
        'post_type'      => sanitize_text_field($filter['type']),
        'paged'          => intval($filter['page']),
        'posts_per_page' => $filter['qty'],
    ];

    $qry = new WP_Query($args);

    if ($qry->have_posts()) :
        ob_start();

        while($qry->have_posts()) : $qry->the_post(); ?>
            <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <?php get_template_part('templates/loop', 'card' ); ?>
            </div>
        <?php endwhile;

        $response = [
            'status' => 200,
            'posts'  => ob_get_clean(),
        ];
    endif;

    wp_reset_query();
    wp_reset_postdata();

    die(json_encode($response));
}

add_action('wp_ajax_do_load_posts', 'ajax_do_load_posts');
add_action('wp_ajax_nopriv_do_load_posts', 'ajax_do_load_posts');

项目被插入或附加到容器中，但砌体仅在页面加载时已经存在的项目上触发。

我在谷歌上搜索并尝试了各种解决方案，但它们都不起作用，无论是同位素还是砖石 jquery 插件。

【问题讨论】：

如果您还没有弄清楚：在 jsfiddle/jsbin 中减少测试用例会有很大帮助。尤其是上面的代码似乎不完整...
@MattDiMu 我能够解决我的问题，下面是我的答案。上面的代码不完整，但我只是删除了特定于我的布局的东西。

标签： ajax wordpress jquery-isotope jquery-masonry

【解决方案1】：

我能够解决我的问题，看起来问题是因为我使用的是 jQuery 默认的附加/插入方法。我已改用同位素方法，现在一切正常。

所以基本上不是

$container.html( $items ).isotope( 'appended', $items, function() {
    console.log('inserted');
});

我现在正在使用：

$grid.isotope('insert', jQuery($items));

如果我不使用同位素附加/插入方法，同位素无法知道已附加项目实际上看起来合乎逻辑。请注意，我还在 jQuery 中包装了 $items。

无论如何，我为相同的 PHP 函数工作的 JS 是：

function load_content( args ) {

    $container = $('#container-async');
    $status    = $('.status');

    $.ajax({
        url: ajax_url,
        data: {
            action: 'do_load_posts',
            nonce: nonce,
            args: args
        },
        type: 'post',
        dataType: 'json',
        success: function( data, textStatus, XMLHttpRequest ) {

            $items = data.posts;

            var $grid = $('.masonry').imagesLoaded( function() {

                $grid.isotope({
                    itemSelector: '.grid-item',
                    percentPosition: true,
                    masonry: {
                        columnWidth: '.grid-sizer'
                    }
                });

                if ( args.action === 'filter') {
                    $grid.isotope('remove', $('.grid-item'));
                }

                $grid.isotope('insert', jQuery($items));
            });


            $grid.on( 'layoutComplete', function( event, laidOutItems ) {
                $container.removeClass(data.action);
            });
        },
        error: function( MLHttpRequest, textStatus, errorThrown ) {
            $status.toggleClass('active');
        }
    });
}

【讨论】：