带有 MySQL 结果分页的 PHP jQuery AJAX

Question

我遇到了一个奇怪的问题。我制作了一个使用 jQuery AJAX 函数显示 MySQL 结果的页面。结果在每页中显示为 12，因此有多个页面，因此需要分页。

问题是，当我点击第 2 页或“下一页”时，它会转到第 2 页，但是当我再次单击第 3 页或“下一页”而不是转到第 3 页时，它会返回到第 1 页。同样的事情当我从第 3 页单击第 2 页时会发生这种情况。它总是在转到任何其他页面之前返回到第 1 页。原因是

if(isset($_REQUEST['page'])) {
    $page = $_REQUEST['page'];
}
else{
    $page = 1;
}

返回 false，因此每次在进入第三页之前都会将页面设置回 1，除非它位于第一页。

这是 jQuery AJAX 函数:

<script type="text/javascript">
$(".pagination a").on( "click", function(e){
    e.preventDefault();
    $(".loading-div").show(); //show loading element
    var page = $(this).attr("data-page"); //get page number from link
    $("#container").remove();
    $("#content").load("fetch_page.php",{"page":page}, function(){ 
        $(".loading-div").hide(); // hide loading element
    });
 });
</script>

此外，我还有一个图像缩放功能，当单击图像时，它会显示为模态框类型窗口。即使这样也只适用于第 1 页，而不适用于任何其他页面。即使我加载第 2 页并再次单击第 1 页，它也能正常工作。我注意到，当我点击第 1 页时，页面加载时就好像它不是通过 AJAX 加载而是加载整个页面本身，因为它将页面加载到顶部。而其他页面使用 AJAX 按预期加载。

这很奇怪，我不明白为什么会这样，尽管我已经检查了分页代码并且它显然在 href 属性中根本没有任何 URL。

Answer 1

这适用于委托(delegate):

$(document).ready(function() {
    $("#content" ).load( "fetch_page.php");

$("#content").on( "click", ".pagination a", function (e){
    e.preventDefault();
    $(".loading-div").show(); //show loading element
    var page = $(this).attr("data-page"); //get page number from link
    $("#content").load("fetch_page.php",{"page":page}, function(){ //get content
        $(".loading-div").hide(); //hide loading element
    });
  });
});