javascript - jQuery 实时悬停

Question

我似乎无法将以下内容转换为实时悬停

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

我试过:

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

但它不起作用。

Answer 1

从 jQuery 1.7+ .live() 是 deprecated ，并且 .delegate() 一直是 superseded 通过 .on() 方法。

使用.on()和 .off()代替 .live() 和 .die()。使用 .on() 代替 .delegate()。

转换旧代码很简单 as explained here .

---

您需要调用 .hover() 的事件分别映射到，如下所示:

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

.hover() 不是像 .click() 这样的事件函数例如，它是 just a special shortcut for .mouseenter(handler1).mouseleave(handler2) ...所以你需要在你的 .live() 中做同样的事情打电话。

如果您使用的是 jQuery 1.4.3+，则可以使用 map 来简化操作，如下所示:

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

此外，如果这是在特定的 <ul> 上, .delegate() 是更好的选择，像这样:

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