jQuery : issue with .live()

Question

This works ( .hover ):

$('a.directory:not(.trashContent), a.file:not(.trashContent)').hover(function() {
    if (!dragged) $(this).find('a.suppr:first').show();
}, function() {
    $(this).find('a.suppr:first').hide();
});

And this does not work ( .live('hover') ):

$('a.directory:not(.trashContent), a.file:not(.trashContent)').live('hover', function() {
    if (!dragged) $(this).find('a.suppr:first').show();
}, function() {
    $(this).find('a.suppr:first').hide();
});

Any idea why?

`'hover'` is not an event type. `hover()` is a custom shorthand method defined by jQuery. — Šime Vidas, Jan 20 '12 at 14:01
fyi, `live` is considered to be deprecated in newer versions of jquery. — Daniel A. White, Jan 20 '12 at 14:01
Your answer is here: http://stackoverflow.com/questions/2262480/jquery-live-hover — Nakul, Jan 20 '12 at 14:06

score 3 · Accepted Answer · answered Jan 20 '12 at 14:06

3

The reason why it doesn't work is, that hover is not really a single event. It binds together the event handlers for mouseenter and mouseleave. Means hover itself is not really an own event handler. To make it work with live (better use .on() ) you must use the event handlers seperated.

$("#Element").live({
  mouseenter:function(){
    //do something
  },
  mouseleave:function(){
    //do something
  }
});

answered Jan 20 '12 at 14:06

Sven Bieder

5,515
2
21
27

the `live` method is deprecated, if using jquery version 1.7+ use `on` or else use `delegate` – Rafay Jan 20 '12 at 14:11

score -2 · Answer 2 · answered Jan 20 '12 at 14:02

-2

.live is old. Since jQuery 1.7 there is a total new Event API in jQuery and you should use .on() for all events.

An example:

$('a.directory:not(.trashContent), a.file:not(.trashContent)').on('mouseenter', function() {
  console.log('You have hovered on ' + $(this));
});

And you can better select elements combinated with .is():

$('a.directory, a.file').is(':not(.trashContent)', function() {
  var $elem = jQuery(this);
  $elem.on('mouseenter', function() {
     console.log('You have hovered on ' + $elem);
  });
});

answered Jan 20 '12 at 14:02

Wouter J

41,455
15
107
112

1

Did you notice you are doing `.is` wrong, which is kind of ironic since the documentation link is just above it. – Esailija Jan 20 '12 at 14:11
Your answer doesn't answer the question at all. – Lightness Races in Orbit Jan 20 '12 at 14:13
@Esailija, ah yes. I notice, I will remove it. I always write the doc link without go to the doc page... – Wouter J Jan 20 '12 at 14:14

jQuery : issue with .live()

2 Answers2