jQuery AJAXページ分割による指数関数的なループの防止方法

Question

jQueryでajaxページネーションを作成しようとしています。私はそれが動作するようになっているが、大規模な問題：

ページ分割は、< < - 最初の< - 前のページ1ページ2次 - >最後 - >>と各ボタンが動作します。 pagenumはajaxを通して送られ、そのページ番号に関連するポストを表示する際にページが置かれるDIVをリロードします（ページ1 =ポスト1-10など）。

合計2ページのうち1ページ目とします。 Page 2、Next、Lastのいずれかをクリックすると、2ページに移動します。私がPage 1、PreviousまたはLastをクリックすると、ページ1に移動しますが、Ajaxは2回起動されます。

Page 2、Next、Lastをクリックすると2ページ目に戻りますが、Ajaxは4回起動します。私がPage 1に戻ると、ajaxが8回起動します。

私はこれでどこに行くのか分かります。私は3つのファイルのための私のコードを含めています

：コンテンツはgetposts.phpをロード

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

fetchposts.js内に表示されている

のindex.phpは（ワードプレスのものから自分のコンテンツをseperates）

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

ポスト並びに改ページをロードgetposts.php（すなわち、ここで、PRあるので、問題が起こっている場合、これは、唯一のページ区切りコードが含まれ

• 私はコードのクリーニングが必要承知しています：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> 
  

  です。私はちょうどこのループ事を最初に固定したい。

• ajax自体が動作します。それは適切な値を送信し、それらを正しく取得します。
• 変数はすべて宣言され、正しく設定されます。

それがうまく機能し、適切な場所に私を送りながら、ここでも、問題は、指数関数的に私はページネーションを使用回数に基づいて火災そのアヤックスである：1回のクリックで一度AJAXを発射するが、2回のクリック火災2回、3回のクリックで4回、4回のクリックで8回などが発生します。

質問は次のとおりです。指数ループを停止するにはどうすればよいですか？

Answer 1

あなたのlive()は私が見る限りの原因です...

私は（）（あなたはJSONヘッダを渡した後、json_encodeされていると仮定するとフォワード戻る一意のIDを&を割り当て、スクリプトのPHPの一部で現在のページを設定します、それはpreviouseページのリンクのための$array_of_vals_for_json['back_button']=$thispage-1;ようなものになるだろう。

私たちはあなたのPHPがまともな提案を行うためにやっているかを確認する必要があるだろうと思うが、私はあなたのライブは、私も。改ページをリフレッシュしていることを行うことはできませんループ

Answer 2

getposts.phpを複数回ロードしています。その結果、ライブイベントは、ロードするたびにバインドされますgetposts.php。

ページの読み込みfetchposts.jsはgetposts.phpをロードし、ライブのクリックイベントをバインドします。次に、リンクをクリックすると、getposts.phpが再びロードされ、ライブのクリックイベントが再びバインドされます。ループ。

あなたのjsコードをfetchposts.jsに移動してください。あなたは良いはずです。