Well, I know the answer is yes, but I can't figure out how. Can you
help?
I'm using jQuery to take values from an XML file (a schedule for a
radio station), wrap them up into nice HTML elements, and inject them
into my web page. When the user hovers over any of the jQuery-created
elements, I want something to happen.
Currently, my jQuery code looks like this...
$(document).ready(
function(){
var nowDay = new Date().getDay();
var nowHours = new Date().getHours();
var nowMinutes = new Date().getMinutes();
var nowID = nowDay * 10000 + nowHours *100 +
nowMinutes;
$.ajax({
type: "GET",
url: "schedule.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('show').each(
function(){
var showStart =
$(this).attr('start');
var showEnd =
$(this).attr('end');
var showDay =
$(this).parent('day').attr('id');
var showTitle =
$(this).find('title').text();
var showArtist
= $(this).find('artist').text();
var
showDescription = $(this).find('description').text();
var showTime =
$(this).find('time').text();
$('#'+showDay).append("<div class='show'><span
class='time'>"+showTime+"</span> <h3>"+showTitle+"</h3><div
class='more-info'><p class='artist'>"+showArtist+"</p><p
class='description'>"+showDescription+"</p></div></div>");
}
);
$(".show").hover(
function(){
$(this).children('.more-info').SlideInUp(500);
}, function(){
$(this).children('.more-info').SlideOutUp(500);
}
);
}
});
}
);
As you can see, I'm trying to bind an animation to the hover event of
all div.show elements on the page. But because they're created by
jQuery, the usual way I'd do it doesn't seem to work.
Any suggestions would be greatly appreciated.
Many thanks :-)
Zarino Zappia
