How to enable infinite scroll in jquery
<p>I am using <a href="https://github.com/paulirish/infinite-scroll" rel="nofollow">Infinite scroll plugin</a> on the following markup. In the fonts button div we are loadig the google fonts, than on the callback we are creating the buttons of all google fonts family names, append the button in the li item than append li inside ul and finally append ul inside div#fontsbutton.</p>

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

<p>My Js code is as follows :</p>

<pre><code>$.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 = $("&lt;ul /&gt;");
        $.each(fonts.items, function (index, value) {
            var li = $("&lt;li style='list-style:none;float:left;'/&gt;");
            var button = $("&lt;button /&gt;").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: "&lt;em&gt;Congratulations, you've reached the end of the internet.&lt;/em&gt;",
                msg: null,
                msgText: "&lt;em&gt;Loading the next set of posts...&lt;/em&gt;",
                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
            }
       });
</code></pre>

<p>The infinite scrolling is not working. Can please anybody tell me what i am doing wrong here?</p>
