在ajax加載頁面內無限滾動

Question

我有一個頁面（讓我們叫它1.php），它使用jQuery-ajax將2.php加載到div-box中。 2.php從我的數據庫打印20條記錄。 當我滾動時到達div-box的底部時，我希望它加載下20條記錄。 像Facebook，Twitter等，等等。

現在，我已經得到了這種行爲，但只有當它自己加載2.php時！ 但不在分隔框內。

我該如何解決這個問題？

在此先感謝！

Answer 1

文件1.PHP應該輸出這樣的：

<div id="content"> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    // when we scroll, check the position: 
    $(window).scroll(function() 
    { 
     // if at bottom, add new content: 
     if ($(window).scrollTop() == $(document).height() - $(window).height()) 
     { 
     $.get("2.php",function(data) { 
      $("#content").append(data); 
     },'html'); 
     } 

    }); 

    }); 
</script> 

如果你想發送的迭代次數，以2.PHP你能記得它在一些隱藏的輸入並把它作爲參數傳遞給$獲得（） 。

希望它有幫助。

Answer 2

您可能在2.php中有一些初始化Javascript代碼來設置滾動事件處理程序。當您使用ajax加載頁面並將其放入div內時，此初始化代碼不會執行。處理Ajax請求後，您需要執行相同的初始化代碼。

Answer 3

這裏的關鍵是檢測滾動位置。這是否正常工作？

Answer 4

考慮使用航點的jQuery插件： http://imakewebthings.github.com/jquery-waypoints/

並給予看看無限滾動例如： http://imakewebthings.github.com/jquery-waypoints/infinite-scroll/