如何打開.load jquery頁面內的鏈接，而無需重新加載頁面

Question

我有下面的jquery代碼更新查詢時，我點擊一個複選框，一切都很好我唯一的問題是我已加載的頁面有一個分頁，當我點擊下一個或其中一個分頁鏈接刷新頁面並丟失搜索。我想知道是否有一種方法可以打開頁面內的鏈接，而無需重新加載頁面。如果不是，最好的辦法是分頁數據。在這裏感謝

是我的jQuery代碼：

$(document).ready(function() { 
    $(".remember_cb").click(function() { 
     var action = $("#criteria").attr('action'); 
     var form_data = $('#criteria').serialize(); 
     $.ajax({ 
      type: "POST", 
      url: action, 
      data: form_data, 
      beforeSend: function() { 
       $('#loading').html('<center><img src="/images/loading8.gif" alt="Loading..." align="absmiddle"/></center>').fadeIn('fast'); 
      }, 
      success: function (data) { 
       $("#loading").fadeIn('fast'); 
       $('#exercise_list').html(data).fadeIn('slow'); 
       $("#loading").fadeOut('slow'); 
      } 
     }); 
    }); 
    return false; 
}); 

如果你需要我，包括其他任何代碼，請讓我知道。任何幫助將非常感激。

Answer 1

當一個正常的鏈接被點擊，它會觸發導航到任何網址在其href。您將不得不阻止導航行爲，但仍會觸發一些JS，這些JS將使用下一頁數據重新填充搜索結果。您可以在按鈕的click事件處理一舉兩得：

var page = 1; //the page number we're currently on 

$('a.nextPage').click(function(e) { 
    e.preventDefault(); //stops navigation to the URL in the link 

    var input = $('#criteria input[name="page"]'); 
    if (!input.length) { 
     input = $('<input>', {type:'hidden', name:'page'}).appendTo("#criteria"); 
    } 

    input.val(++page); 

    var action = $("#criteria").attr('action'); 
    var form_data = $("#criteria").serialize(); 

    $.ajax({ 
     type: "POST", 
     url: action, 
     data: form_data, 
     beforeSend: function() { 
      $('#loading').html('<center><img src="/images/loading8.gif" alt="Loading..." align="absmiddle"/></center>').fadeIn('fast'); 
     }, 
     success: function (data) { 
      $('#exercise_list').html(data).fadeIn('slow'); 
      $("#loading").fadeOut('slow'); 
     } 
    }); 
}); 

該代碼僅僅是一個例子，但希望你的想法。我也想擺脫這行從您的success功能：

$("#loading").fadeIn('fast'); 

這可能會產生怪異的視覺效果，因爲你的負載指示器已經顯現。此外，小細節，但<center>標籤已被棄用一段時間。只需使用中心對齊的div。