jquery-ias 插件不适用于我的网站，加载更多项目不起作用

Question

我这样设置我的网站：

 <div id="posts" class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <div class="post post-preview">
                <a href="post.html">
                    <h2 class="post-title">
                        Visualization Data Art
                    </h2>
                    <h3 class="post-subtitle">
                        How to make sense of big data
                    </h3>
                </a>
                <p class="post-meta">Posted by <a href="#">KP</a> on September 24, 2016</p>
            </div>
            <hr>
            <div class="post post-preview">
                <a href="3.html">
                    <h2 class="post-title">
                        About this blog
                    </h2>
                </a>
                <p class="post-meta">Posted by <a href="about.html">KP</a> on September 18, 2016</p>
            </div>
            <hr>
        </div>
         <div id="pagination">
            <a href="2.html">1</a>
            <a href="3.html" class="next">2</a>
        </div>

我的javascript是这样的：

 var ias = jQuery.ias({ container:  '#posts', item: '.post', pagination: '#pagination', next:'.next ' });

当我尝试加载更多内容时，按钮 "older post" 消失了，没有显示任何页面。我只尝试在网站上找到的基本示例。

Answer 1

我觉得分页不对。这是文档 Infinite AJAX Scroll Docs，您可以看到“.next”用在 link 而不是 "li" 在您的代码中，您在 "li" 标记和 [=16] 上使用它=] 标签。我推测这个插件的工作方式是它在 a 标签上查找 href 然后 ajax 调用它并获取它的内容然后附加到容器 DOM.

<ul id="pagination" class="pager">
            <li class="next">
                <a href="2.html">1</a>
                <a class="next" href="2.html">Older Posts &rarr;</a>
                <a href="2.html">3</a>
            </li>
        </ul>

jquery-ias 插件不适用于我的网站，加载更多项目不起作用

jquery-ias plugin doesnt work with my website, load more items doenst work

javascript

jquery

plugins

jquery-ias