javascript - jqueryで無限スクロールを有効にする方法

Question

次のマークアップで無限スクロール プラグインを使用しています。フォント ボタン div では、Google フォントをロードしています。コールバックでは、すべての Google フォント ファミリ名のボタンを作成しています。li 項目にボタンを追加し、ul 内に li を追加し、最後に 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
            }
       });

無限スクロールがうまくいきません。ここで私が間違っていることを誰かに教えてもらえますか?