jQuery AJAY live hover event?

Question

hey guys, sorry i'm asking this again, but I can't find a solution. I know there are a few posts out there, but for me nothing seems to work. I'm loading a part of a website with the jquery load() method. I'll apply the following rule to all links inside them:

$('.file a').live('click', function(e) {
    alert('click event firde');
});

this click event works just perfectly fine. however i want to have a hover event on those links as well:

$('.file a').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
    alert('why doesn't the hover event fire????');
 } else {
    // do something on mouseout
    }
});

i have no idea why my hover event wont fire? can i only apply one event handler with live to a specific selector???

any ideas?

Answer 1

According to the jQuery documentation, "As of jQuery 1.4.1 .live() can accept multiple, space-separated events...". So as long as you are using at least v. 1.4.1 you should be fine. The only problem I found is this line:

alert('why doesn't the hover event fire????');

which should be

alert("why doesn't the hover event fire????");

You had a single quote in a string literal bound by single quotes. That would cause the statement and any after it to fail.

Ironically, Stack Overflow's code coloring fails on the line as well. :)

Answer 2

You want to bind the events separately, like this:

$('.file a').live('mouseenter', function() {
  //hover code
}).live('mouseleave', function() {
  //stopped hovering code
});

We're using mouseenter and mouseleave because these are the events that .hover() binds to.

Answer 3

Are you sure you are using at least jquery 1.4.1? Anything lower and that code will not work.