无限滚动不起作用？

Question

看起来它不适用于下面的代码，有什么问题吗？它无法工作，也没有错误。

<h1> Infinite Scroll Demo </h1>
    <div id="container">
        <div class="includeitem"> www.gbin1.com </div>
        <div class="includeitem"> www.gbin1.com </div>
        <div class="includeitem"> www.gbin1.com </div>
        <div class="includeitem"> www.gbin1.com </div>
        <div class="includeitem"> www.gbin1.com </div>
        <div class="includeitem"> www.gbin1.com </div>
        <div class="includeitem"> www.gbin1.com </div>
        <div class="includeitem"> www.gbin1.com </div>
        <div class="includeitem"> www.gbin1.com </div>
        <div class="includeitem"> www.gbin1.com </div>
    </div>

    <a id="next" href="demo2.html">next page</a>

    <script src="js/jquery-1.6.1.js"></script>
    <script src="js/jquery.infinitescroll.js"></script>

    <script>

        $('#container').infinitescroll({
            navSelector     : "#next:last",
            nextSelector    : "#next:last",
            itemSelector    : ".includeitem"
        });

     </script>

下面是 demo2.html 的代码，只是将一些 div 内容添加到首页。

    <div class="includeitem"> www.gbin1.com </div>
<div class="includeitem"> www.gbin1.com </div>
<div class="includeitem"> www.gbin1.com </div>
<div class="includeitem"> www.gbin1.com </div>
<div class="includeitem"> www.gbin1.com </div>
<div class="includeitem"> www.gbin1.com </div>
<div class="includeitem"> www.gbin1.com </div>
<div class="includeitem"> www.gbin1.com </div>
<div class="includeitem"> www.gbin1.com </div>
<div class="includeitem"> www.gbin1.com </div>
<div class="includeitem"> www.gbin1.com </div>
<div class="includeitem"> www.gbin1.com </div>

<a id="next" href="demo12.html">next page</a>

Answer 1

尝试在导航中添加环绕元素，这样两个不同的项目就不会使用相同的 ID。

另外，您不需要：

nextSelector: #next:last

只需使用：

nextSelector: #next

可能是 :last 破坏了它 - 尝试使用 Firebug/web 检查器并查看 $('#next:last') 在您的第一页上返回什么，但很可能是缺少分页容器。