AJAX 分页，页面不可单击

AJAX pagination, pages not clickable

本文关键字：单击 分页 AJAX      更新时间：2023-09-26

我对ajax页面有问题。在索引文件中，我有这个分页代码： 

<div id="pagesn">
<?php
    require_once 'libs/db.class.php';
    require_once 'libs/global.inc.php';
         $query="select count(*) as tot from table";
          $countset=$db->runquery($query);
          $count=$db->get_row($countset);
          $tot=$count['tot'];
          $page=1;
          $ipp=3;
          $totalpages=ceil($tot/$ipp);
          echo"<ul class='pages'>";
          for($i=1;$i<=$totalpages; $i++)
          {
              echo"<li class='$i'>$i</li>";
          }
          echo"</ul>";
        ?>
</div>

这是 AJAX 代码：

$("#pagesn .pages li").click(function(){
        //show the loading bar
        showLoader1();  
        $("#pagesn .pages li").css({'background-color' : ''});
        $(this).css({'background-color' : '#A5CDFA'});                
        $("#resn").load("data1.php?page=" + this.className, hideLoader1);
    });
    // by default first time this will execute
    $(".1").css({'background-color' : '#A5CDFA'});
    showLoader1();
    $("#resn").load("data1.php?page=1",hideLoader1);

主要问题是php代码在索引文件中，因此如果不刷新就无法更新，因此这意味着当我添加新条目时，页码不会更新。我尝试将此代码添加到其他文件中，并使用jQuery加载到同一div中：

$('#pagesn').load('data.php');

之后，页面会自动更新，但随后它们变得无法点击，是什么导致了这个问题？

当您动态添加和删除li元素时，为了附加 ' click' 处理器，您需要使用 .on 函数：

$('#pagesn').on('click','.pages li',function(){

尝试：

$("#pagesn").on("click",".pages li",function(){
        showLoader1();  
        $("#pagesn .pages li").css({'background-color' : ''});
        $(this).css({'background-color' : '#A5CDFA'});                
        $("#resn").load("data1.php?page=" + $(this).attr("class"), hideLoader1);
    });

来自 .on（） 函数的文档：

委托事件的优点是，它们可以处理以后添加到文档中的后代元素中的事件。

因此，使用 .on() 而不是 .click() 将确保即使在执行代码后插入的元素上也能执行处理程序函数。

$('#pagesn').on('click','.pages li',function(){
  // Do something ...
})
相关文章：