如何在我想要的网页中使用无限滚动？

Question

我正在使用一个无限滚动的 jQuery 插件来实现类似 Twitter 的分页功能。现在，当我单击 more 链接时，请求会发送到服务器，并以 HTML 形式给出响应。首先我尝试使用 jQuery 模板，后来我更改了所有内容，因为我在网上没有发现使用 JSON 来做这件事。

好吧，现在我有一个问题，只有代码没有将响应附加到页面上的现有内容。它只是发送请求，从不附加到文档的现有模型中。

插件演示：http://www.infinite-scroll.com/trigger.html

我想要这样的代码

<div id="result">
    <ul>
        <li>
        </li>
        <li>
        </li>
        <li>
        </li>
        <li>
        </li>
    </ul>
</div>

我需要当用户点击 more 链接时，更多的 'li' 来自响应并附加到结果 'ul' 内的 'li'。

 $('#result ul').infinitescroll({
        navSelector: "a#next:last",
        // selector for the paged navigation (it will be hidden)
        nextSelector: "a#next:last",
        // selector for the NEXT link (to page 2)
        itemSelector: "#result ul"
        // selector for all items you'll retrieve
    });

    // kill scroll binding
    $(window).unbind('.infscr');

    // hook up the manual click guy.
    $('a#next').click(function () {
        $(document).trigger('retrieve.infscr');
        return false;
    });

    // remove the paginator when we're done.
    $(document).ajaxError(function (e, xhr, opt) {
    });

Answer 1

您甚至不需要插件即可完成此操作。这是通过一些简单的 jQuery 行来完成的：

示例：http://jsfiddle.net/6fnTT/9/

$("a").live("click", function(){
    var data = "<li style='display:none'>Text3</li>";

    $("ul").append(data);
    $("li:hidden").fadeIn('slow');
});

data 可能是任何东西（只要确保它是不可见的，具有淡入淡出效果并且您需要编辑 li:hidden）。例如。这可能是ajax请求的结果。根据结果​​的类型（例如 html 或 json），您需要对其进行准备以使其适合您的 html。

如果您的 ajax 响应有问题，请发布代码。