AJAX分页，页面不可点击

问题描述：

我有一个Ajax页面的问题。在索引文件中我有这样的分页代码：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');

之后，网页更新automaticaly，但随后他们变得不可点击，是什么原因导致这个问题？

没有任何答案解决问题了吗？ – Wolfram 2012-07-10 16:19:31

不，它didint – 2012-07-10 16:34:31

的“无法点击”的问题至少应该得到解决使用。对（）。还有什么问题？ – Wolfram 2012-07-10 16:38:58

答

当你动态添加和删除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); 
    });

答

从documentation of the .on() function：

委托事件有TH优势ey可以处理来自稍后添加到文档的后代元素的事件。

因此，使用的.on()代替.click()将确保您的处理函数甚至在被执行的代码后要插入的元素执行。

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

AJAX分页，页面不可点击

相关推荐