I am using jquery-ui tabs and ajax to load the content of the tabs. Here is my javascript:

 $(document).ready(function() {
     $("#tabs").tabs({ fx: { opacity: 'toggle' } });
     $('.hd_item').hover(function() {
     //Display the caption
         $(this).find('span.hd_caption').stop(false,true).fadeIn(600);
     },
     function() {
     //Hide the caption
         $(this).find('span.hd_caption').stop(false,true).fadeOut(400);
     });
 });

When the user clicks on the tab is will load the content.php via ajax. The output of the ajax is:

 <li class="hd_item">
      <img title="Backyard Brawl" alt="Backyard Brawl" src="games/normal_icons/1844.png" id="hd_icon">
           <span class="hd_caption">
                <h1>Backyard Brawl</h1>
                <p id="hd_description">In this game you pick a player and beat each other up with ...</p>
                <p id="hd_stat">Added: <br>2009-12-14</p><a href="/dirtpilegames/index.php?ground=games&amp;action=play&amp;dig=backyard-brawl">PLAY</a>
           </span>
 </li>

The problem that I am having is the javascript is not working on the ajax output. How to I get it to work on it?