Php jquery/WordPress：对通过AJAX加载的新内容应用无限滚动效果
因此，我尝试将jQuery无限滚动插件与一些自定义jQuery结合使用，这些自定义jQuery使用AJAX从不同的PHP文件加载一个新循环。无限卷轴可以在初始页面内容上工作，但我无法让它在新加载的内容上工作。以下是AJAX逻辑的工作原理：Php jquery/WordPress：对通过AJAX加载的新内容应用无限滚动效果,php,jquery,wordpress,scroll,infinite,Php,Jquery,Wordpress,Scroll,Infinite,因此，我尝试将jQuery无限滚动插件与一些自定义jQuery结合使用，这些自定义jQuery使用AJAX从不同的PHP文件加载一个新循环。无限卷轴可以在初始页面内容上工作，但我无法让它在新加载的内容上工作。以下是AJAX逻辑的工作原理： 单击一个类别 获取存储在中的类别ID REL属性 将该ID存储为变量 将变量作为参数传递给 不同PHP文件中的循环和 加载PHP文件的该部分 无限卷轴的关键部分是脚本可以找到以下内容： 包含指向下一页帖子的链接的元素（初始内容为pageNav，新内容为filt
category\uu in'=>array（$\u POST['id']）category\uu，肯定会更容易回答。因此，如果有人对这个简化的问题有任何见解或答案，那也太好了
以下是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 } ?>
很难说我是否无法在浏览器中调试脚本。您无法提供测试URI或将infinitescroll的调试属性设置为true，并将其生成的输出发布到FireBug控制台
在添加设置了id属性的内容时，它可能需要做一些事情。我不知道当有两个或多个元素共享同一个id（应该是唯一的）时DOM的行为
我认为这对于#content和#filter应该没问题，因为它们并没有真正添加到DOM中，但是#filter容器中的所有元素最好只使用类，或者在加载任何内容之前从DOM中删除。另一个地方寻找答案：一旦通过AJAX加载了另一个循环，控制台显示消息“[“导航选择器未找到”]”，所以我想这就是问题所在。。。除此之外，无需告知错误消息或类似信息。您是否尝试将[…]下一个[…]更改为[…]下一个[…]和导航选择器：“#filterPageNav”，下一个选择器：“#beyondInfinity”，更改为导航选择器：“div.filterPageNav:last”，下一个选择器：“a.beyondInfinity:last”，
<?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(); ?>
<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'> » </a></div>