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

워드 프레스 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 플러그인으로 작동 없다.

Answer 1

내 문제를 해결할 수 있었고 jQuery 기본 추가/삽입 메서드를 사용했기 때문에 문제가 발생했습니다. 나는 동위 원소 방법으로 전환했는데 이제는 괜찮아 보입니다.

그래서 기본적으로 대신

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

지금 사용하고 있습니다 :

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

그것은 논리적 보인다 실제로 동위 원소 내가 동위 원소/삽입 방법 추가 사용하지 않는 경우 항목이 추가됩니다 알 수 없다. 그리고 jQuery 내부에 $ 항목도 래핑했습니다.

어쨌든 같은 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'); 
     } 
    }); 
}