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

Question

因此，我尝试将 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 中删除。