砌体+ Infintine滚动实施问题

Question

我设法实现在WordPress砌筑无限滚动和它的工作，但我有一对夫妇的bug：

的职位都应该在阿贾克斯被打开，但它不工作了现在添加项目，只为前几个。

所有帖子显示后，控制台输出错误： GET http://www.jcvergara.com/working/page/3/?_=1431138637809 404（未找到）。 我不确定它与什么有关。我将不胜感激任何想法如何解决它。

这里是我的代码：

<div class="main"> 
    <div id="content" class="container"> 
     <div class="right-line"></div> 

     <!-- List of categories, only on the first page --> 
     <?php 
       $cur_url = $_SERVER['REQUEST_URI']; 
       if ($cur_url == '/working/') { 
        echo '<div class="item tags">'; 
        echo '<div class="item-title">'; 
        echo '<span class="tag">Tags</span>'; 
        echo '<ul><li><a href="/working/" class="active">All</a></li>'; 
        wp_list_categories('orderby=term_group&title_li='); 
        echo '</ul></div></div>'; 
       } 

      ?> 

     <!-- Posts --> 
     <?php if (have_posts()) : ?> 
      <?php while (have_posts()) : the_post(); ?> 
       <?php $category = get_the_category(); ?> 
       <div class="item <?php echo $category[0]->slug; ?>"> 
        <a class="mask post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"></a> 
        <div class="item-title"> 
         <span class="tag"> 
          <?php echo $category[0]->cat_name; ?> 
         </span> 
         <h4><?php the_title(); ?></h4> 
        </div> 
        <div class="item-img"> 
         <?php if (has_post_thumbnail($post->ID)): ?> 
          <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail'); ?> 
          <div class="thumb" style="background-image: url('<?php echo $image[0]; ?>'); "></div>         
         <?php endif; ?> 
        </div> 
        <div class="item-text"> 
         <?php the_excerpt(); ?> 
         <span class="more"><a href="#">Read more...</a></span> 
        </div> 
       </div> 
      <?php endwhile; ?> 
     <?php endif; ?> 
     <div class="clear"></div>  
    </div> 
    <?php the_posts_navigation(); ?> 
</div> 

在阿贾克斯开放职位代码：

$(document).ready(function(){ 
$.ajaxSetup({cache:false}); 
$('.post-link').click(function(){ 
    $('.openarticle').css('display', 'block'); 

    var post_link = $(this).attr('href'); 

    $('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>'); 
    $('#openthis').load(post_link); 
    $('<a></a>', { 
     text: 'Close', 
     class: 'close', 
     id: 'close', 
     href: '#' 
    }) 
    .prependTo($('.openarticle .main')) 
    .click(function() { 
     $('.openarticle').css('display', 'none'); 
     $('#close').remove(); 
    });  
    return false;   
}); 
}); 

这里是链接：http://www.jcvergara.com/working/

在此先感谢。

Answer 1

您需要在无限滚动的回调函数中添加用于打开帖子的代码。 （顺便说一下，实际上你应该包括无限滚动的特定代码和你的代码来打开你的问题的帖子，而不仅仅是一个链接。）

下面是应该帮助的无限滚动代码的一部分：

 function(newElements) { 
      var $newElems = $(newElements); 
      $container.masonry('appended', $newElems); 
    //add this to your code 

    $('.post-link').click(function(){ 
    $('.openarticle').css('display', 'block'); 

    var post_link = $(this).attr('href'); 

    $('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>'); 
    $('#openthis').load(post_link); 
    $('<a></a>', { 
     text: 'Close', 
     class: 'close', 
     id: 'close', 
     href: '#' 
    }) 
    .prependTo($('.openarticle .main')) 
    .click(function() { 
     $('.openarticle').css('display', 'none'); 
     $('#close').remove(); 
    }); 
    return false; 
    }); 

     } 

你的错误信息涉及到没有3页通过infinitescroll加载