如何在jquery中启用无限滚动

Question

我在以下标记上使用Infinite scroll plugin。在字体按钮div中我们加载谷歌字体，而不是在回调中我们创建所有谷歌字体系列名称的按钮，在li项目中追加按钮而不是在ul里面附加li，最后在div＃fontsbutton中附加ul。 / p>

<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
            }
       });

无限滚动无效。可以请任何人告诉我我在这里做错了什么？