jQuery 无限滚动手动触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10762656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
infinite scroll manual trigger
提问by inTOWN
Just doesn't seem to work... :-( Have seen more complaints about it but I can't find the answer.
只是似乎不起作用...... :-( 已经看到更多关于它的抱怨，但我找不到答案。
The Problem:Infinite scroll works but not the manual trigger. When I click the link, nothing happens. Firebug gives
问题：无限滚动有效，但手动触发无效。当我点击链接时，没有任何反应。萤火虫给
My code:
我的代码：
<?php echo ('<ul id="infinite">'); ?>
<?php
$wp_query = new WP_Query();
$wp_query->query('paged='.$paged.'&cat=5&showposts=3&meta_key=video_video&orderby=meta_value&order=ASC' . $post->ID);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<?php if ( get_post_meta($post->ID, 'video_video', true) ) : ?>
<li class="video"><?php $home = array("h" => 290, "w" => 380, "zc" => 1, "q" =>100);
//echo get('video_video');
echo ('With: ');
echo get('participant_first_name');
echo (' ');
echo get('participant_last_name');
echo ('</li>');?>
<?php endif;?>
<?php endwhile;?>
<?php if (get_post_meta($post->ID, 'video_video', true) ) { ?>
<?php if ($wp_query->max_num_pages > 1) : ?>
<nav id="nav-below" >
<div id="next" >
<?php next_posts_link( __( 'Scroll down for more', 'intowntheme' ) ); ?></div>
</nav>
<?php endif; //end nav ?>
<?php } else { ?>
<p>There are no interviews at the moment </p>
<?php } ?>
</ul>
And my script:
还有我的脚本：
jQuery('ul#infinite').infinitescroll({
navSelector : "#next", // selector for the paged navigation (it will be hidden)
nextSelector : "#next a", // selector for the NEXT link (to page 2)
itemSelector : "ul#infinite li", // selector for all items you'll retrieve
errorCallback: function() {
// fade out the error message after 2 seconds
$('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal');
},
loading : {
msgText: "<em>Loading the next year of Grantees...</em>",
finishedMsg: "<em>You've reached the end of the Interviews.</em>"
},
});
//kill scroll binding
jQuery(window).unbind('.infscr');
//setTimeout("jQuery('#next').slideDown();", 1000);
//hook up the manual click guy.
jQuery('#next a').click(function(){
jQuery('#next a').infinitescroll('retrieve.infscr');
return false;
});
also tried
也试过
jQuery(document).trigger('retrieve.infscr');
instead of
代替
jQuery('#next a').infinitescroll('retrieve.infscr');
but no luck.
但没有运气。
Firebug then says trigger(retrieve.infscr) called incorrectly
萤火虫然后说 trigger(retrieve.infscr) called incorrectly
回答by inTOWN
Pfoe, found it... Long live good documentation (NOT with this plugin!)
Pfoe，找到了……好的文档万岁（不是这个插件！）
This:
这个：
jQuery('#next a').click(function(){
jQuery('#next a').infinitescroll('retrieve.infscr');
return false;
});
Should be:
应该：
jQuery('#next a').click(function(){
jQuery('ul#infinite').infinitescroll('retrieve');
return false;
});
the biggest problem was the .infscr which shouldn't be there.. Hope it helps someone else..
最大的问题是不应该存在的 .infscr .. 希望它可以帮助其他人..
Documentation-like solution:
类似文档的解决方案：
jQuery("#clickable_element").click(function(){
jQuery('#main_content_container').infinitescroll('retrieve');
return false;
});
Note:
You may have to add the manual trigger behaviorif you are working with masonry or isotope in order to make it work. Just include manual-trigger.jsafter infinitescroll and pass the behavior by passing behavior: 'twitter'when calling the plugin.
注意：如果您正在使用砖石或同位素，
您可能需要添加手动触发行为才能使其工作。只需manual-trigger.js在无限滚动后包含并behavior: 'twitter'在调用插件时传递行为。
回答by Divot
I made the following tweak to ensure the navigation link showed up after being clicked the first time:
我做了以下调整以确保导航链接在第一次点击后显示：
jQuery("#clickable_element").click(function(){
jQuery('#main_content_container').infinitescroll('retrieve');
jQuery('#pagination').show();
return false;
});
回答by Sergei Zahharenko
Maybe... $('#next a').click(); ?
也许... $('#next a').click(); ?
