infinite scroll not triggering

Question

I am attempting to use the infinite scroll scripts located here:

http://iamjustinlong.com/blog/single/implementing_infinite_scroll_in_your_expressionengine_site/

I have followed this pretty much word for word, but it is not working and I am running out of time to get it to work. Below is my code:

SNIPPET:

    <div class="col" id="#blog-container">
        {exp:channel:entries
            channel="blog"
            dynamic="no"
            orderby="date"
            limit="2"
            status="open|tall|regular"
            paginate_base="_embed/ajax_scroll"               
        }

        {if no_results}
            <div class="entry">
                <article style="min-height: 600px;">
                    <header>
                        <h1>No Results</h1>
                    </header>
                    Check back soon for more blog posts. 
                </article>
            </div> <!-- /.entry -->
        {/if}
        <div class="entry">
            <article>
                <header>
                    <p class="meta">
                        <span class="category">{categories}{category_name}{/categories}</span> / <span class="date">{entry_date format="%F %d, %Y"}</span>
                    </p>
                    <h1><a href="{url_title_path='blog/details'}">{title}</a></h1>
                </header>
                <img src="{blog_image}" alt="">
                {blog_excerpt}&nbsp; &nbsp; &nbsp; <a href="{url_title_path='blog/details'}" style="display: inline-block;">read more</a>
            </article>
        </div> <!-- /.entry -->

        {paginate}
        <p class="morePosts">
            {if next_page}<a href="{auto_path}" class="more" id="next">See More Posts</a>{/if}
        </p>
        {/paginate}
        {/exp:channel:entries}
    </div> <!-- /.col -->

BASE CODE:

{snip_ajax_scroll}
    <script type="text/javascript" src="{site_url}assets/js/jquery.infinitescroll.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#blog-container').infinitescroll({
                  navSelector : "p.morePosts",
                  nextSelector : "a.more",
                  itemSelector : ".entry",
                  contentSelector: "#blog-container",
                  extractLink: true // This is crucial if you want it work properly. Setting this to false or excluding it will not allow the script to work with EE
             })

        });


        // Unbind normal behavior
        $(window).unbind('.infscr');

        // Bind normal behavior to the click function and prevent the browser from redirecting to the URL.
        $('a#next').click(function(){
            $(document).trigger('retrieve.infscr');
            return false;
         });

    </script> 

I have used console.log at different parts of the js to see if the scripts are firing and I get a message for all the blocks above except for the click function on a#next. This seems to die.

Let me know if there are any other code items you need and thanks in advance for any help!

Answer 1

I had everything correct except the # in the ID.