Istotope ajax內容加載

Question

我被卡住實施加載下一組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'); 

項目只對已經存在的頁面加載項插入或追加到容器，但磚石被觸發。

我用Google搜索周圍，並試圖各種解決方案，但他們沒有工作，也沒有用同位素或磚石jQuery插件。

Answer 1

我能解決我的問題，看起來像這樣的問題是因爲我使用jQuery默認append/insert方法。 我已經切換到同位素方法，現在看起來很好。

所以基本上代替

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