AJAX加载内容无页面刷新

Question

I've been beating my brain trying to figure out why this won't work. The initial page loaded content does load up just fine, but clicking the menu links does nothing at all. It won't load the pages. Hovering over the menu links shows the correct content url, but clicking them does nothing. Here is the test site. menu link 1 and menu link 2 are the test links. The content will load up in the main content div: brandonbutler.com/alex/

I got the code from this tutorial . Here is the code I'm using:

$(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

I wen to your site and saw this:

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

That means that doing

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

Will result on page being "toc-content/toc1.html" and you trying to load this: "toc-content/toc-content/toc1.html.html"

Change to this instead:

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

Hope it helps!

Answer 2

Google around for 'asynchronous'.

The issue is that the page is loading after $('ul#keepcolors... ').click(..) executes so it's not binding the click to any element because those elements don't exist on the page until $('main').load(..) is complete.

Try this:

$('#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;
   });
});