Question

我正在尝试在基于WordPress的站点中实现无限滚动功能（是的，Infinite Scroll周围有很多插件。我测试了一下，我想拥有自己的，因为它们都不能100％工作）。一般来说，我的实施工作（当然借助于网络上的样本）。基本的想法是，当我到达页脚时，jQuery load（）调用用于加载下一组帖子。

在functions.php中，我添加了以下内容：

function include_infinite_scroll_js() {
    if( !is_singular() ) {
        wp_enqueue_script( 'my-infinite-scroll', get_template_directory_uri() . '/js/jquery.infinitescroll.js', array('jquery') );
    }
}
add_action('wp_enqueue_scripts', 'include_infinite_scroll_js');

jquery.infinitescroll.js来自https://github.com/infinite-scroll/infinite-scroll/blob/master/jquery.infinitescroll.js

function add_infinite_scroll_to_footer() {
    if( !is_singular() ) {
    ?>
    <div id="infinite-scroll-wrap">
        <?php next_posts_link('Next page'); ?>
    </div>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('.content').infinitescroll({
                navSelector : "#infinite-scroll-wrap",
                nextSelector : "#infinite-scroll-wrap a:first",
                itemSelector : ".posts",
                debug : true,
                loading: {
                    msgText : 'Loading Next Posts...',
                    finishedMsg : 'No more Posts left! :('
                },
                animate : false,
                dataType : 'html'
            });
            jQuery('.archive-nav').remove();
        });
    </script>
    <?php
    }
}
add_action('wp_footer', 'add_infinite_scroll_to_footer');

我使用2 <div>个元素。只有第二个<div>（名为＆＃34;帖子＆＃34;的类）的内容将附加到第一个<div>（名为＆＃34; .content＆＃34;的类）。这是使用jquery.infinitescroll.js中的以下代码处理的：

box.load(desturl + ' ' + opts.itemSelector, undefined, function infscr_ajax_callback(responseText) {
   instance._loadcallback(box, responseText, desturl);
});

因此，从下一页开始，＆＃34;发布＆＃34;检索<div>并将其添加到＆＃34;内容＆＃34;原始页面的<div>没有＆＃34;样式＆＃34;属性和<span>如下图所示：

content after the jQuery load()

在图像的左侧，我标记了帖子元素以及在使用load（）加载下一页后从图像右侧消失的样式和跨度。

是的，我检查了执行load（）函数后样式表仍然存在。我使用这段代码来查看<head>之前和之后的所有链接是否相同。它是一样的。

instance._debug("links after");
var links = window.document.getElementsByTagName('link');
$(links).each(function() {
    instance._debug($(this).attr('href'));
});

我无法弄清楚是什么让＃34;风格＆＃34; （和span）在load（）之后消失。我想对此有所了解并感谢您的帮助。

感谢。

jQuery .load（）无法加载样式属性

0 个答案: