Hi Josh,
Sorry for the late reply... but I finally got round to implementing
your suggestion. Unfortunately, it doesn't seem to help. The action
(SlideInUp) only happens once, on only one of the divs, and then
mousing-out of it doesn't trigger the second half of the .hover
function. Hovering over any other '.show' divs doesn't trigger their
effects either. You can only get one effect to happen on the page. :-S
Why do you think that is happening?
Cheers,
Zarino
On Dec 27, 12:20 am, "Josh Nathanson" <[EMAIL PROTECTED]> wrote:
> 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
