php - AJAX 分页，页面不可点击

Question

我对 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');

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

Answer 1

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

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

Answer 2

尝试：

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

Answer 3

从.on() 函数的文档中：

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

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

$('#pagesn').on('click','.pages li',function(){
  // Do something ...
})