Why does my JS/JQuery code only work in a web browser's console?

Question

The $(element).scroll(function(){}); function isn't working for me when I put it into a js file but when I enter it into the console (just the scroll func), it works just fine.

I'm trying to do a scrolling pagination.

I've looked through my other js files and the only thing that I think could be conflicting is another one of the files has a $(document).ready(function(){}) but I'm pretty sure that's not the problem. I'm also using Dropkick to make pretty dropdowns but I doubt that's it either.

Here's the code, almost verbatim. It's basic for now until I can figure out how to get it to load.

$('#main').scroll(function(){
    if(($('#main').prop('scrollHeight'))==
        ($('#main').scrollTop()+$(document).height()-10)){
        //^there's a strange 10px empty space that needs to be accounted for
        $('#loading').show();
        $('#main').css('overflow','hidden');
        addMore();
    }
});
$(document).ready(function(){
    addMore();
});
addmore.counter=0;
function addMore(){
    $.ajax({
    async: 'true',
    url: 'http://mywebsite.com/bc/get',
    type: 'post',
    data: ({'offset':(addmore.counter)}),
    success: function(data) {
        $('#scrollingpagination').append(data);
        $('#loading').hide();
        $('#main').css('overflow','scroll');
        addmore.counter++;
    }
    });
}

And here's the HTML (not verbatim, but same idea)

<!--I'm only including the "main" div that shows the content.-->
<div id='main'>
    <div id='scrollingpagination'></div>
    <div id='loading'></div>
</div>

Thanks guys, I really appreciate it!

Answer 1

try keeping

$('#main').scroll(function(){
            ......
}) 

inside document.ready . i think it was called before the dom was ready