Using Event Delegation to monitor links and execute .load()

Using Event Delegation to monitor links and execute .load()

I'm having trouble using event delegation to load pages via Ajax.

You can see the page at:

http://www.ispycreativity.com/concept07.htm

and the relevant jQuery is at:

http://www.ispycreativity.com/scripts/global.js

Currently only one of the links is working correctly (The paint pallet icon) the main nav bar isn't working.

Here's a snippet of the jQuery:

$(document).click(function(e)
    {
      var $linkClicked = $(e.target);
       
      alert("$(e.target) is "+$linkClicked);
       
      if( $linkClicked.is("a") )
      {
        var youWantToGoTo = $linkClicked.attr('href').slice(0,-4); // Determine destination
        alert("You want to go to the "+youWantToGoTo+" page.");
        openPage(youWantToGoTo); // Open destination
        window.location.hash = youWantToGoTo; // Set the url #
        return false;
      }
    });


When the user clicks anywhere on the page an alert appears (purely for testing purposes) nothing else should happen unless the click is on a link. In which case the href attribute is read, the final 4 characters removed ('home.htm' becomes 'home'), the function openPage() is executed, then the anchor is added to the URL so the user can bookmark the AJAX pages, finally "return false" to prevent the user going to a different page.

Help will be greatly appreciated and I'd be happy to help you in return with perhaps some design work.