Question

This is getting really frustrating now!

I’ve created a script that appends some content from another page to the body when you hover a special link. I also set it up so that whenever i move the mouse away from the link, the new element (with the loaded content) hides. So far, so good. The problem is that sometimes when i move the cursor away from the link too fast, the script doesn’t react (or something). Ah well, i thought, and just added this evil code that refuses to work:

$('#userBubble').mouseover(function() {
    $(this).hide();
});

Now, is there anything wrong with that? I’ve tried using mouseenter instead, but no luck with that either. I’ve also tried putting it inside a $(document).ready() function – no luck there either. #userBubble is the the container of the content loaded on hover, and the name is correct. I can console.log #userBubble, so it does in fact exist.

Any ideas what’s messing this up? I get no errors, it just doesn’t work.

Answer 1

Make sure that user ID is unique in the DOM and that the element exists when you bind(or use live).

Change it to a class and use live. I bet it works.

<img id="userBubble" class="userBubble"/>

$('.userBubble').live("mouseover", function() {
    $(this).hide();
});