jQuery AJAX 페이지 매김 기하 급수적 인 반복을 방지하는 방법은 무엇입니까?

Question

jQuery를 사용하여 아약스 페이지 매김을 만들려고합니다. 나는 큰 문제가 있지만 작동하도록하고있다 :

페이지 번호는 < <- 첫 번째 < - 이전 페이지 1 페이지 2 다음 -> 마지막 - >>과 각 버튼이 작동합니다. pagenum은 아약스를 통해 보내지고 해당 페이지 번호와 관련된 게시물을 표시 할 때 페이지가 놓이는 DIV를 다시로드합니다 (페이지 1 = 게시물 1-10 등).

합계 2 페이지 중 1 페이지에 있다고 가정합니다. Page 2, Next, Last를 클릭하면 2 페이지로 이동합니다. 그런 다음 Page 1, Previous 또는 Last를 클릭하면 1 페이지로 이동되지만 Ajax가 두 번 실행됩니다.

페이지 2, 다음 또는 마지막 페이지 2를 다시 클릭하면 다시해야하지만 아약스는 4 번 실행됩니다. 1 페이지로 돌아 가면 아약스가 8 번 실행됩니다.

어디서 볼 수 있습니까? 내가 3 개 파일에 대한 내 코드를 포함하고

: 콘텐츠가 getposts.php를로드

<script type="text/javascript" src="fetchposts.js"></script> 
<div id="contPaginated"> 
    <div id="content"></div> 
</div> 

fetchposts.js 안에 표시되는

의 index.php는 (WordPress의 물건에서 내 콘텐츠를 seperates) 게시물뿐만 아니라 매김을 (문제가 일어나고있는 곳이 어디 홍보 때문에이 포함에만 매김 코드로드

$(document).ready(function() { 
    $('#content').load('getposts.php'); 
}); 

getposts.php

• 나는 코드를 청소해야 알고 : oblem 내가 분명히 몇 가지를 만들고 싶어)

  <script type="text/javascript"> 
  $(document).ready(function() { 
  var first = 1; 
  var currentPage = 1; 
  var numrows = <?php echo $rows; ?>; 
  var pagerows = <?php echo $page_rows; ?>; 
  var last = <?php echo $last; ?>; 
  var pagenum = ''; 
  var hideLikes = <?php echo $hideLikes; ?>; 
  var hideDislikes = <?php echo $hideDislikes; ?>; 
  
  for (i = 1; i <= last; i++){ 
      $('<div id="page_' + i + '" class="pageNum"><a href="#">' + i + '</a></div>').appendTo('.pages'); 
  } 
  
  $('.pageNum').live('click', function() { 
      pagenum = $(this).attr('id').replace('page_', ''); 
      paginationAjax(); 
      return false; 
  }); 
  
  $('.first').live('click', function() { 
      pagenum = first; 
      paginationAjax(); 
      return false; 
  }); 
  
  $('.previous').live('click', function() { 
      pagenum = Math.max(currentPage - 1, first); 
      paginationAjax(); 
      return false; 
  }); 
  
  $('.next').live('click', function() { 
      pagenum = Math.min(currentPage + 1, last); 
      paginationAjax(); 
      return false; 
  }); 
  
  $('.last').live('click', function() { 
      pagenum = last; 
      paginationAjax(); 
      return false; 
  }); 
  
  function paginationAjax(){ 
      // Send values to database 
      $.ajax({ 
       url: 'getposts.php', 
       //check.php receives the values sent to it and stores them in the database 
       type: 'GET', 
       data: 'pagenum=' + pagenum, 
       success: function(callback) { 
        $('#content').html('').html(callback); 
       } 
      }); 
  } 
  }); 
  </script> 
  
  <div class="Pagination"> 
  <div class ="Pagination-inside-top"> 
      <div class="first"> 
       <a href=''> <<-First </a> 
      </div> 
  
      <div class="previous"> 
       <a href=''> <-Previous</a> 
      </div> 
  
      <div class="pages"></div> 
  
      <div class="next"> 
       <a href=''>Next -> </a> 
      </div> 
  
      <div class="last"> 
       <a href=''>Last ->></a> 
      </div> 
  </div> 
  </div> 
  

  입니다. 이 루프를 먼저 고정시키고 싶습니다.

• 아약스 자체가 작동합니다. 적절한 값을 보내고 검색합니다.
• 변수는 모두 선언하고 잘 설정합니다.

그래서 다시, 문제는 잘 기능하고 적절한 장소에 저를 보내는 동안 아약스가, 화재가 기하 급수적으로 나는 매김 사용 횟수에 따라이다 : 1 개 클릭이 아약스를 한 번 만 2 클릭 화재 화재 그것을 두 번, 3 번 클릭하면 4 번, 4 번은 8 번 등이 발생합니다.

그래서 질문입니다 : 어떻게 지수 루프를 멈 춥니 까?

Answer 1

live() 내가 볼 수있는 한 원인은 ...

나는 뒤쪽 고유 ID를 &을 할당하고 (당신이 JSON 헤더를 통과 된 후로 json_encode()는, 그것은 previouse 페이지 링크 $array_of_vals_for_json['back_button']=$thispage-1; 같은 것입니다 가정 스크립트의 PHP 부분에 현재 페이지를 설정합니다.

을

는 우리가 당신의 PHP가 어떤 괜찮은 제안을 위해 무엇을하고 있는지 볼 필요가 있다고 생각하지만, 나는 라이브가 그래도. 페이지 매김 새로 고침하는 것을 할 수없는 반복

Answer 2

getposts.php을로드하면 라이브 이벤트가 getposts.php을로드 할 때마다 바인딩됩니다.

페이지로드 fetchposts.js는 getposts.php을로드하고 라이브 클릭 이벤트를 바인딩합니다. 그런 다음 링크를 클릭하면 getposts.php이 다시로드되고 라이브 클릭 이벤트가 다시 바인딩됩니다. 루프.

js 코드를 fetchposts.js로 옮기면 좋을 것입니다.