為什么我的JS / JQuery代碼只能在Web瀏覽器的控制台中使用？

Question

$（element）.scroll（function（）{}）; 當我將其放入js文件時，該函數對我不起作用，但是當我將其輸入到控制台中時（只是滾動功能），它就可以正常工作。

我正在嘗試進行滾動分頁。

我查看了我的其他js文件，我認為可能唯一矛盾的是另一個文件中有一個$（document）.ready（function（）{}），但我敢肯定這不是問題所在。 我也在使用Dropkick進行漂亮的下拉菜單，但我也懷疑是這樣。

這是幾乎逐字記錄的代碼。 在我弄清楚如何加載之前，這是現在的基本操作。

$('#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++;
    }
    });
}

這是HTML（不是逐字記錄，而是相同的想法）

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

謝謝大家，我真的很感激！

Answer 1

嘗試保持

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

在document.ready內部。 我認為這是在dom准備好之前被調用的