Jquery Unable to Hover append html

Question

Hi there,

I am appending HTML into the DOM via jquery.append - my script is as follows (please excuse the crappy code)

myDiv = $("<div class='bottomright' title="+msgID+">"+msgTitle+msgContent+
"</div>").appendTo(document.body).fadeOut(0).slideDown('fast');
shown.push(msgID);

is there a different way to address either the hover or the appending (because looking at firebug, it seems the divs get in there ok, and they show up perfectly) so that I can use the hover function?

When I say I am unable to use it, I mean it actually does nothing, I have written the following and nothing happens:

$(".bottomright").hover(function(){
    alert("text")
})

Answer 1

hover takes two functions as arguments:

the first argument is a function that is to be executed when the element gains focus from the mouse. the second is fired when the element loses focus from the mouse.

-BUT- since you are dynamically generating these elements, you need to use live:

live does not work with hover, so you are forced to do this:

$( '.bottomright' ).live( 'mouseover',  function() { alert( "in" ); } )
                   .live( 'mouseout', function() { alert( "out" ); } );

Answer 2

You need to use the live() function, as it appears that your div is being dynamically generated:

$('.bottomright').live('hover', function() { alert( "text" ); }, function() {} );

Answer 3

Hi Eddie, welcome to Stack Overflow!

Just a tip - it really helps to format code using the 10101 button at the top. For example:

myDiv = $(""+msgTitle+msgContent+"").appendTo(document.body).fadeOut(0).slideDown('fast'); 
shown.push(msgID);

In regards to your question, I'm guessing your object of class "bottomright" may not be taking up any space. I noticed your fadeOut and slideDown, maybe there is something else that is causing the div to not take up any space? (Check in firebug layout tab).

Also, are you binding your hover event after creating the div? If it is before, it might not work. In jQuery 1.3, they added live(type,fn) to bind all future objects also.

Answer 4

I think I found the answer - all I did was move the hover call to under where the div was being generated, which was in a for loop. I read a little further and the reason it wasn't working is because it was activating hover when the DOM loaded, but there was no div to attatch it to - by running it each time a div is made, it seems to work just fine. Maybe there is a better way of doing this?? Thank you though! I will try .live()