jQuery live hover

Question

I can't seem to convert the following into a live hover

$("li.favorite_item").hover(
    function () {
        $(this).append($(" <a href='#' class='button'>x</a>"));
    }, 
    function () {
        $(this).find("a:last").remove();
    }
);

I've tried:

$("li.favorite_item"").live('hover', function() { 
    function () {
        $(this).append($(" <a href='#' class='button'>x</a>"));
    }, 
    function () {
        $(this).find("a:last").remove();
    }
});

But it does not work.

Answer 1

From jQuery 1.7+ .live() is deprecated, and .delegate() has been superseded by the .on() method.

Use .on() and .off() in place of .live(), and .die(). Use .on() in place of .delegate().

Converting older code is straightforward as explained here.

---

You need to call the events that .hover() maps to separately, like this:

$("li.favorite_item").live('mouseenter', function() { 
  $(this).append($(" <a href='#' class='button'>x</a>"));
}).live('mouseleave', function () {
  $(this).find("a:last").remove();
});

.hover() isn't an event function like .click() is for example, it's just a special shortcut for .mouseenter(handler1).mouseleave(handler2)...so you need to do the same in your .live() call.

If you're on jQuery 1.4.3+, you can use a map to simplify things, like this:

$("li.favorite_item").live({
  mouseenter: function() { 
    $(this).append($(" <a href='#' class='button'>x</a>"));
  },
  mouseleave: function () {
    $(this).find("a:last").remove();
  }
});

Also, if this is on a specific <ul>, .delegate() is a better option, like this:

$("#myUL").delegate("li.favorite_item", {
  mouseenter: function() { 
    $(this).append($(" <a href='#' class='button'>x</a>"));
  },
  mouseleave: function () {
    $(this).find("a:last").remove();
  }
});

Answer 2

The .live() syntax was nicer, but we have to use .on(), now.

You can use an event map on the document, with the selector as the 2nd argument:

$(document).on({
    mouseenter: function () {
        $(this).append("<a href='#' class='button'>x</a>");
    },
    mouseleave: function () {
        $(this).find("a:last").remove();
    }
}, "li.favourite_item");