load() not loading page

Question

This might be a simple answer, but I am having some issues writing this little load script… I think I have a bug somewhere, I can get it to clear the div, however the page is not loading:

Jquery:

$(document).ready(function() {
//Load content
    $(".load").click(function(){
            $("#content").empty();
            loadName = $(this).find("a").attr("id");
            $("#content").load("/content/" + loadName + ".php");
            });
});

HTML:

<div id="select">    
    <div id="menu">
    <ul>
    <li><a class="load" href="javascript:void(0)" id="project1">Project 1</a></li>
    <li><a class="load" href="javascript:void(0)" id="project2">Project 2</a></li>
    </ul>
    </div>
</div>
<div id="content"></div>

both the php files are located at a link like so (note these are just dummy names and not actual links):

http://www.hostname.com/content/project1.php
http://www.hostname.com/content/project2.php

Answer 1

since you defined $('.load'), you don't need to do find('a') for $(this). Just use $(this).attr('id')

Answer 2

I think your loadName line should be this:

var loadName = $(this).attr("id");  // didn't see a declaration in your code

Answer 3

jquery's find() "does not search the selected elements, only their descendants."

Looks like you already have "this" pointing at your "a" elements, so get rid of the find().