jquery Ajax Content Not loading

I am pulling my hair out trying to figure this out. I am just doing a simple ajax load on some content however the content is not loading all other functions are working but the content does not show. Any help would be greatly appreciated. Its probably something super simple too but.... Here's the code

Main page HTML

    <ul><li id="content1">click this</li></ul>
    <div id开发者_如何学Go="ajaxContent"></div>

External HTML

    <div id="content1"><p>some content here</p></div>

...and the JS

$(function() {

    var $items = $('ul li');

    $items.bind('click',loadContent);

    function loadContent() {

      var toLoad = 'content.html'+' #'+ $(this).attr('id');

      var $content = $('#ajaxContent');

      $content.append('<span id="load">LOADING...</span>');  
      $('#load').fadeIn('normal');  

      $content.load(toLoad,'',showNewContent) 

      function showNewContent() {
        $content.fadeIn(1000,hideLoader);
        }

      function hideLoader() {  
        $('#load').fadeOut('normal');
       }  
   }

}):

---

Your problem is that you are declaring your functions showNewContent and hideLoader inside of your loadContent function. That means that you can't reference them until your loadContent function has been called (but it needs to use them itself). Move the functions showNewContent and hideLoader outside of the loadContent function and it should work.

---

The hash (the part from the #) is not sent to the server. If this is the only thing that changes, the browser will not see it as a new url and will not load the page. Change the url to content.html?id=1 or something, and make sure you handle this GET parameter correctly on the server.