jquery在沒有頁面刷新的情況下加載點擊事件數據

Question

我的博客中有一個活動日曆。除了點擊事件以外，它的工作方式與我的期望一致因爲點擊next或prev link months不會更改其數據。通常如果點擊上級鏈接，它應該呈現上個月但不工作。與下一個相同。怎麼解決？請

[日曆]

<dl class="data"> 
    <dt>Archive</dt> 
    <dd class="calendar"> 
     <?php 
      date_default_timezone_set("Asia/Dhaka"); 
      if(!isset($_REQUEST['month'])){$month = date("m");}else{$month = $_REQUEST['month'];} 
      if(!isset($_REQUEST['year'])){$year = date("Y");}else{$year = $_REQUEST['year'];} 
      if(!isset($_REQUEST['day'])){$day = date('d');}else{$day = $_REQUEST['day'];} 
      $timestamp = mktime (0, 0, 0, $month, 1, $year); 
      $monthName = date("F", $timestamp); 
      $prev_year = $year; 
      $next_year = $year; 
      $prev_month = $month-1; 
      $next_month = $month+1; 
      if($prev_month == 0){$prev_month = 12;$prev_year = $year - 1;} 
      if($next_month == 13){$next_month = 1;$next_year = $year + 1;} 
      $prev_month = str_pad($prev_month, 2, '0', STR_PAD_LEFT); 
      $next_month = str_pad($next_month, 2, '0', STR_PAD_LEFT); 
     ?> 
     <div class="table"> 
      <div class="tr caption"> 
       <div class="th L"> 
        <a id="cprev" href="javascript:void(0);">&lsaquo;</a> 
       </div> 
       <div class="th monyer"><?php echo($monthName.'-'.$year); ?></div> 
       <div class='th R'> 
        <a id="cnext" href="javascript:void(0);">&rsaquo;</a> 
       </div> 
      </div> 
      <div class='thead'> 
       <div class="td">S</div> 
       <div class="td">M</div> 
       <div class="td">T</div> 
       <div class="td">W</div> 
       <div class="td">T</div> 
       <div class="td">F</div> 
       <div class="td">S</div> 
      </div> 
      <?php 
       $monthstart = date("w", $timestamp); 
       $lastday = date("d", mktime (0, 0, 0, $month + 1, 0, $year)); 
       $startdate = -$monthstart; 
       //Figure out how many rows we need. 
       $numrows = ceil (((date("t",mktime (0, 0, 0, $month + 1, 0, $year)) 
       + $monthstart)/7)); 
       //Let's make an appropriate number of rows... 
       for($k = 1; $k <= $numrows; $k++){ 
      ?> 
      <div class="tr days"> 
      <?php 
       //Use 7 columns (for 7 days)... 
       for ($i = 0; $i < 7; $i++){ 
        $startdate++; 
        $startdate = str_pad($startdate, 2, '0', STR_PAD_LEFT); //Make dates leading zero 
        if($startdate <= 0){//If we have a blank day in the calendar. 
      ?> 
      <div class="td L"> 
       <?php echo("&nbsp;");?> 
      </div> 
      <?php }elseif($startdate > $lastday){echo('<div class="td R">&nbsp;</div>');}else { 
       if(in_array($year.'-'.$month.'-'.$startdate, $dates) && $startdate == date("d") && $month == date("m") && $year == date("Y")){ ?> 
      <div class="td today"> 
       <span class="triangle-up-left"></span> 
        <a href="blog/archives/<?php echo($year.'-'.$month.'-'.$startdate); ?>"><?php echo($startdate); ?></a> 
      </div> 
      <?php 
      } elseif($startdate == date("d") && $month == date("m") && $year == date("Y")){?> 
      <div class="td today"><?php echo($startdate); ?></div> 
      <?php } else { ?> 
      <?php if(in_array($year.'-'.$month.'-'.$startdate, $dates)) { ?> 
      <div class="td days"> 
       <span class="triangle-up-left"></span> 
       <a href="blog/archives/<?php echo($year.'-'.$month.'-'.$startdate); ?>"><?php echo($startdate); ?></a> 
      </div><?php }else{ ?> 
      <div class="td days"><?php echo($startdate); ?></div><?php }?> 
      <?php } } } ?></div><?php } ?> 
     </div> 
    </dd> 
</dl> 

<script> 
    var maxPages = {{ page.last }}; 
    var Pmonth = <?php echo($prev_month);?>; 
    var Pyear = <?php echo($prev_year);?>; 
    var Nmonth = <?php echo($next_month);?>; 
    var Nyear = <?php echo($next_year);?>; 
</script> 

[jQuery的]

$('#cprev').click(function(e){ 
    e.preventDefault(); 
    var pmonth = Pmonth; 
    var pyear = Pyear; 
    var url = 'http://localhost/phalcon3/blog?month='+pmonth+'&year='+pyear; 
    $.post(url,{pmonth:"pmonth",pyear:"pyear"},function(){ 

    }); 
}); 

Answer 1

將href設置爲href='#'將阻止重定向。

而且你應該在你的jQuery函數的最後返回false，以防止默認動作：

$('#cprev').on('click', function(e){ 
    var pmonth = Pmonth; 
    var pyear = Pyear; 
    var url = 'http://localhost/phalcon3/blog?month='+pmonth+'&year='+pyear; 

    $.ajax({ 
     type:"POST", 
     url: url 
     data: {pmonth:"pmonth",pyear:"pyear"}, 

     success: function(result){ 
      console.log(result); 
     }, 
     error: function(){ 
     } 
    }); 

    return false; 
}); 

Answer 2

e.preventDefault()並不總是停止頁面清爽。

添加return false到您的jQuery單擊處理的，像這樣的一端應停止刷新頁面：

$('#cprev').click(function(e){ 
    e.preventDefault(); 
    var pmonth = Pmonth; 
    var pyear = Pyear; 
    var url = 'http://localhost/phalcon3/blog?month='+pmonth+'&year='+pyear; 

    $.post(url,{pmonth:"pmonth",pyear:"pyear"},function(){ 

    }); 

    return false; 
});