jQuery live() deprecated: Using on for mouseenter and mouseout?

Question

I wonder how I can rewrite the following listener with jQuery on()

$('.box').live({
        mouseenter:
        function() {
            $(this).children('.menu').stop(true, true).fadeIn(fadeIn);
        },
        mouseleave:
        function() {
            $(this).children('.menu').stop(true, true).fadeOut(fadeOut);
        }
    });

Any ideas?

See http://stackoverflow.com/questions/8021436/jquery-1-7-turning-live-into-on and the documentation http://api.jquery.com/live/, http://api.jquery.com/on/. You will find the information about how to convert `.live` to `.on` there. — Felix Kling, Jul 19 '12 at 11:11

score 4 · Accepted Answer · answered Jul 19 '12 at 11:07

$(document).on('hover', '.box', function(e) {
  if( e.type == 'mouseenter') {
    $(this).children('.menu').stop(true, true).fadeIn(fadeIn);
  } else {
    $(this).children('.menu').stop(true, true).fadeOut(fadeOut);
  }
});

Instead of document it would be better to use any parent element of .box which is not dynamic.

Read about .on().

Syntax of .on() for delegate event (aka live event) is:

$( StaticParent ).on( eventName, target, handlerFunction );

score 2 · Answer 2 · answered Jul 19 '12 at 11:12

For exact .on equivalent:

$(document).on({
    mouseenter: function() {
        $(this).children('.menu').stop(true, true).fadeIn(fadeIn);
    },
    mouseleave: function() {
        $(this).children('.menu').stop(true, true).fadeOut(fadeOut);
    }
}, '.box');

Though the main benefit here is that you don't need to use document, you can just use the closest parent that is guaranteed to exist for the lifetime of the page.

jQuery live() deprecated: Using on for mouseenter and mouseout?

2 Answers2