1

我正在使用无限滚动 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) {
    });
4

1 回答 1

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 响应有问题，请发布代码。

于 2011-04-12T14:25:03.467 回答