How to run javascript on an ajax output?
- by WAC0020
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&action=play&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?
