php - jquery/WordPress : apply infinite scroll effect to new content loaded via AJAX

Question

所以我尝试将 jQuery 无限滚动插件与一些自定义 jQuery 结合使用，这些自定义 jQuery 通过 AJAX 从不同的 PHP 文件加载新循环。无限滚动适用于初始页面内容，但我无法使其适用于新加载的内容。 AJAX 逻辑的工作原理如下:

1. 点击类别
2. 获取存储在的类别ID REL 属性
3. 将该 ID 存储为变量
4. 将变量作为参数传递给 不同 PHP 文件中的循环以及 加载 PHP 文件的该部分

无限滚动的关键部分是脚本可以找到以下内容:

1. 包含指向帖子下一页的链接的元素(#pageNav 表示初始内容，#filterPageNav 表示新内容)
2. 指向帖子下一页的链接 (#beyondInfinity)
3. 包含帖子的 div
4. 帖子本身

这可能是问题的一部分。另一个问题可能是 $_POST['id'] 调用没有正确发布到分页类别帖子的各个页面: ("../category-filter/page/2", "../category -filter/page/3"等)

非常感谢任何见解或帮助!!!

编辑/添加 8/17:

在我(或您)回答有关将无限滚动应用到通过 AJAX 加载类别的外部循环的问题之前 category__in'=>array($_POST['id'])首先假设一个固定的类别肯定更容易回答，例如 category__in'=>array(13) 。因此，如果有人对这个简化的问题有任何见解或答案，那就太好了!

这是 JQUERY:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<?php if( is_home() ) { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/spritely.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //Add Loading Image
    $('body').append('<div id="catFilterLoading"></div>');
    $('#catFilterLoading').pan({fps: 30, speed: 1000, dir: 'right', depth: '1'});

    //Filter Categories
    $.ajaxSetup({cache:false});
    $('#categoryContainer ul li a').click( function() {
        $('#catFilterLoading').show();
          //Remove the initial page navigation + the infinite scroll script
        $('#pageNav, #documentInfinite').remove();
          //Get the category ID, stored in the REL attr
        var cat_id = $(this).attr('rel');
          //Load the '#filter' div and post the cat_id to that page to be used in the new loop
        $("#content").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/category-filter/ #filter",{id:cat_id}, function() {
                  //This is the call back function for load()
                  //Do this stuff once the new content has finished loading
                  //hide the loading graphic
            $('#catFilterLoading').hide();

                  //apply a new infinite scroll effect to the loaded content
            $('#filter').infinitescroll({
                navSelector  : "#filterPageNav",            
                nextSelector : "#beyondInfinity",    
                itemSelector : "#filter .post",
                loadingImg   : "<?php bloginfo('stylesheet_directory'); ?>/assets/images/loading.gif",
                donetext     : ""
            });

        });

        return false;
    })
});
</script>
<?php } ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/init.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/infinite-scroll.min.js"></script>
<?php if( is_home() ) { ?>
<script id="documentInfinite" type="text/javascript">
$(document).ready(function() {
    $('#content').infinitescroll({
        navSelector  : "#pageNav",            
        nextSelector : "#beyondInfinity",    
        itemSelector : "#content .post",
        loadingImg   : "<?php bloginfo('stylesheet_directory'); ?>/assets/images/loading.gif",
        donetext     : ""
    });
});
</script>

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/subnavHome.js"></script>
<?php } else { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/subnavPage.js"></script>
<?php } ?>

这是加载内容的 PHP 模板:

<?php
/*
Template Name: categoryFilter
*/
?>
<?php

get_header();

?>
            <h3 id="thinkingH3">Latest Thinking</h3>

            <div id="content">
                <div id="filter">

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
if( !is_paged() ) {
$args=array(
    'category__in'=>array($_POST['id']),
    'paged'=>$paged
   );
} else {
$args=array(
    'category__in'=>array($_POST['id']),
    'paged'=>$paged
   );
}
query_posts($args);
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>                      


                    <div class="post <?php echo $_POST['id']; ?>">

                        <div class="postExcerpt">
                            <span class="postDateOutter"></span>
                            <span class="postDate"><?php the_time('m.d.Y') ?></span>
                            <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/post.jpg" alt="post image" />
                            <h2><?php the_title(); ?></h2>
                            <?php the_advanced_excerpt(); ?>

                            <a class="readFull" href="#">Read Full Post</a>
                        </div>

                        <div class="postAuthor">
                            <?php echo get_avatar( get_the_author_email(), '120' ); ?>
                            <b><?php the_author(); ?></b>
                            <b>Comments: <?php comments_number('0', 'one', '%'); ?> </b>
                            <b>Thinking About</b>
                            <ul>
                                <?php swift_list_cats(7); ?>
                            </ul>
                        </div>

                    </div> <!-- post -->

<?php endwhile; endif; ?>
                <div id="filterPageNav"><?php get_pagination(); ?></div>
                </div> <!-- filter -->

            </div> <!-- content -->




            <?php get_sidebar(); ?>

            <?php get_footer(); ?>

这是分页功能的 HTML 输出(删除了域名):

<div id="pageNav"><a id='pageIndicator'>Page <span>1 <i>of</i> 4</span></a><a href='http://....com/' class='current pageNumbers'>1</a><a href='http://../page/2' class='pageNumbers'>2</a><a href='http://....com/page/3' class='pageNumbers'>3</a><a href='http://....com/page/4' class='pageNumbers'>4</a><a href="http://.../page/2" id="beyondInfinity"><i>Next</i> </a> <a href='http://.../page/4'> &raquo; </a></div>

Answer 1

很难说我是否无法在浏览器中调试脚本。您无法提供测试 URI 或将 infinitescroll 的调试属性设置为 true 并将其生成的输出发布到 FireBug 控制台吗？

这可能与添加具有 id 属性集的内容有关。我不知道当两个或多个元素共享相同的 id 时 DOM 的行为如何，该 id 应该是唯一的。

我认为这对于 #content 和 #filter 来说应该没问题，因为它们并没有真正添加到 DOM 中，但 #filter 容器内的所有元素最好只使用类，或者应该在加载任何内容之前从 DOM 中删除。