jquery tabs - not working when loaded in a new div

I have a basic index page using jquery tabs for left-hand navigation.  When I click a link, I load an external html file in a div - that part works as the html is loaded fine.  What does not work is any jquery and/or jquery tabs in the new div -

Here is code from my index.php:

Now from my js file which I have included in my index.php:

 $(document).read(function() {
        $('#training').click(function() {
            $(#contentcolumn").load("training.html");
             return false;
       })
})

and finally my training.html file, where the html loads, but the tabs do not appear at all, just a list appears for what should be tabs:

<div id = "training sked">
<ul class="anchors">
  <li><a href="#Program">Program Classes</a></li>
  .....
</ul>

<div id = "Program" class="anchor">
<table id = "programclass">
....
</table>

Can anyone help me figure out why the jquery tabs are not working correctly in the new div?

<ul class="category items">
    <li><a id="training"> href="#">Training Schedule</a></li>
 ...
</ul>
 
Later on I do have my <div id = contentcolumn> for the new data to appear

Select allOpen in new window