1

我在以下标记上使用无限滚动插件。在字体按钮 div 中，我们正在加载 google 字体，而不是在回调中，我们创建所有 google 字体系列名称的按钮，将按钮附加到 li 项中，而不是将 li 附加到 ul 中，最后将 ul 附加到 div#fontsbutton 中。

<div id="fontsbutton" class="container" style="width: 450px; height: 100px; overflow: auto;">
</div>
<a id="next" href="index2.html">next page?</a>

我的JS代码如下：

$.ajax({
    url: "https://www.googleapis.com/webfonts/v1/webfonts?key=xxxxxx",
    type: 'GET',
    dataType: 'JSONP',
    success: function (fonts) {   //fetch all google fonts ; data returned is an array 

        var ul = $("<ul />");
        $.each(fonts.items, function (index, value) {
            var li = $("<li style='list-style:none;float:left;'/>");
            var button = $("<button />").css("font-family", value.family).html(value.family);
            li.append(button);
            ul.append(li);
        });
        $("#fontsbutton").append(ul);

        $('#fontsbutton').infinitescroll({
            navSelector: "#next:last",
            nextSelector: "a#next:last",
            itemSelector: "#fontsbutton ul li",
            binder: $("#fontsbutton"),
            debug: true,
            dataType: 'json',
            loading: {
                finished: undefined,
                finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
                msg: null,
                msgText: "<em>Loading the next set of posts...</em>",
                selector: null,
                speed: 'fast',
                start: undefined
            },
            state: {
                isDuringAjax: false,
                isInvalidPage: false,
                isDestroyed: false,
                isDone: false, // For when it goes all the way through the archive.
                isPaused: false,
                currPage: 1
            }
       });

无限滚动不起作用。谁能告诉我我在这里做错了什么？

4

0 回答 0