无限滚动手动触发

Posted 2023-05-09

【中文标题】无限滚动手动触发

【英文标题】：infinite scroll manual trigger

【发布时间】：2012-06-01 12:32:33

【问题描述】：

只是似乎不起作用... :-( 看到更多关于它的投诉，但我找不到答案。

问题： 无限滚动有效，但手动触发无效。 当我单击链接时，没有任何反应。 Firebug 给

Infinite Scroll

我的代码：

    <?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 ('&nbsp;');
            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>     

还有我的脚本：

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;
    );

也试过了

jQuery(document).trigger('retrieve.infscr');

而不是

jQuery('#next a').infinitescroll('retrieve.infscr');

但没有运气。

Firebug 然后说 trigger(retrieve.infscr) called incorrectly

【参考方案1】：

Pfoe，找到了……好的文档万岁（不使用这个插件！）

这个：

 jQuery('#next a').click(function()
    jQuery('#next a').infinitescroll('retrieve.infscr');
 return false;
);

应该是：

jQuery('#next a').click(function()
    jQuery('ul#infinite').infinitescroll('retrieve');
 return false;
);

最大的问题是不应该存在的 .infscr .. 希望它可以帮助别人..

类似文档的解决方案：

jQuery("#clickable_element").click(function()
    jQuery('#main_content_container').infinitescroll('retrieve');
        return false;
);

注意： 如果您正在使用砖石或同位素，您可能需要添加manual trigger behavior 才能使其正常工作。只需在无限滚动后包含manual-trigger.js，并在调用插件时通过behavior: 'twitter' 传递行为。

【讨论】：

如果不是因为这篇文章，我会整天在自己的脚上开枪！

“好的文档万岁（不使用这个插件！）。”同意 100%

【参考方案2】：

我做了以下调整以确保导航链接在第一次被点击后显示出来：

jQuery("#clickable_element").click(function()
    jQuery('#main_content_container').infinitescroll('retrieve');
    jQuery('#pagination').show();
    return false;
);

【讨论】：

嗨 Divot，当没有更多帖子时，有没有办法隐藏按钮？如果我按照您的建议进行操作，即使没有更多帖子，该按钮也会一直显示。

【参考方案3】：

也许... $('#next a').click(); ?

【讨论】：

不，我希望它这么简单，我脚本中的所有其他内容仅使用 jQuery(document).ready(function() 函数加载。无限滚动确实有效（这证明了 jQuery 而不是$) 只是不是手动触发器。

似乎这应该工作...... jQuery('ul#infinite').infinitescroll('retrieve')

如果是这种情况，可能将您的原始答案编辑为 .click() 不起作用。和一个可能......答案是无益的。我不想投反对票或编辑自己，所以请编辑。