jquery / WordPress：对通过 AJAX 加载的新内容应用无限滚动效果

Question

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

1. 点击一个类别
2. 获取存储在 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 或将无限滚动的调试属性设置为 true 并将其生成的输出发布到 FireBug 控制台？

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

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