Question

我使用无限滚动jQuery插件来实现类似Twitter的分页功能。现在，当我点击更多链接时，请求将转到服务器并以HTML格式提供响应。首先我尝试使用jQuery模板，后来我改变了一切，因为我发现没有在线使用JSON做到这一点。

好吧，现在我遇到的问题是只有代码不会将响应附加到页面上的现有内容。它只发送请求，并且永远不会附加到文档的现有模型。

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

我希望有这样的代码

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

我需要它，当用户点击更多链接时，更多'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');
});

数据可能是任何内容（只需确保它具有淡入淡出效果是不可见的，您需要编辑li：hidden）。例如。它可能是ajax请求的结果。根据结果的类型（例如html或json），您需要准备它以使其适合您的HTML。

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

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

1 个答案: