AJAX加載內容無頁面刷新

Question

我一直在絞盡腦汁想弄清楚為什么這行不通。 初始頁面加載的內容確實可以加載，但是單擊菜單鏈接根本沒有任何作用。 它不會加載頁面。 將鼠標懸停在菜單鏈接上會顯示正確的內容URL，但是單擊它們不會執行任何操作。 這是測試站點。 菜單鏈接1和菜單鏈接2是測試鏈接。 內容將在主要內容div中加載：brandonbutler.com/alex/

我從本教程中獲得了代碼。 這是我正在使用的代碼：

$(document).ready(function() {

// initial page load
$('#main').load('toc-content/landing.html');

// handle menu click
$('ul#keepcolors li a').click(function(){
    var page = $(this).attr('href');
    $('#main').load('toc-content/'+ page +'.html');
    return false;
});

});

Answer 1

我瀏覽了您的網站並看到了以下內容：

<a href="toc-content/toc1.html">menu 1</a>

這意味着

var page = $(this).attr('href');
$('#main').load('toc-content/'+ page +'.html');

將在頁面上顯示“ toc-content / toc1.html”，而您嘗試加載此頁面：“ toc-content / toc-content / toc1.html.html”

改為此：

 var page = $(this).attr('href');
 $('#main').load(page);

希望能幫助到你！

Answer 2

谷歌周圍的“異步”。

問題是頁面在$（'ul＃keepcolors ...'）.click（..）執行后正在加載，因此它不會將click綁定到任何元素，因為這些元素直到$（'才在頁面上不存在main'）。load（..）已完成。

嘗試這個：

$('#main').load('toc-content/landing.html', function () {
   // handle menu click
   $('ul#keepcolors li a').click(function(){
      var page = $(this).attr('href');
      $('#main').load('toc-content/'+ page +'.html');
      return false;
   });
});