JQuery not appending properly

I'm trying to load some XML using the JQuery.load function, and that bit is going fine. I'm loading the XML and putting it into the DOM, which is what I want. However, I then need to iterate through the top level child elements and append certain nodes to a different Container. All will become clear when you see the below code:

this is my JS and the storage element:

<div id="ProjectLoad" style="display:none"></div>

        <script type="text/javascript">
            $('#ProjectLoad').load('projects.xml');


            $('project').each(function(){
                debugger;
                var name = $(this).children('name').first().text();
                var desc = $(this).children('desc').first().text();
                var created = $(this).children('created').first().text();
                var uri = $(this).children('url').first().created();

                $('#trapezoidContainer').append('<div id="' + name + '" class="trapezoid-container"></div>');

                $('#' + name).append('<div id="sub-' + name + '" class="trapezoid"></div>');

                $('#sub-' + name).append('<a href="' + uri + '">' + name + '</a>');

                $(this).hover(function(){
                    $('#title').text(name);
                    $('#description').text(desc);
                })

            })
        </script>

And this is my projects.xml:

<projects>
    <project>
        <name>Test</name>
        <desc>Simple test project</desc>
        <created>17/11/1998</created>
        <url>http;//www.gitlab.com/roconnor/test</url>
    </project>
</projects>

I have a debugger statement in the .each(), but it isn't being hit, which is making me thing the .load() is executing after the .each() due to latency...