[jQuery] Re: Can jQuery create an element then bind a hover function to it?

[Josh Nathanson]

Zarino - it's because you are building the html within the success function 
of the Ajax call, but the binding of the hover function happens outside it.

What you might want to do is put your hover binding into its own function 
that you can call from within the Ajax success function:
var binder = function( divs ) {
   divs.hover( //etc.
}

Then inside your ajax success function:
   binder( $(".show") );

Alternately you could use the LiveQuery plugin which does this sort of thing 
automatically.

-- Josh

----- Original Message ----- 
From: "zarino" <[EMAIL PROTECTED]>
To: "jQuery (English)" <jquery-en@googlegroups.com>
Sent: Wednesday, December 26, 2007 3:23 PM
Subject: [jQuery] Can jQuery create an element then bind a hover function to 
it?



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