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()不推荐使用 .delegate()已被.on()方法取代.

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

转换旧代码非常简单,如此处所述.

您需要分别调用.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()例如,它不是一个事件函数,它只是...的一个特殊快捷方式,.mouseenter(handler1).mouseleave(handler2)所以你需要在你的.live()调用中做同样的事情.

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

$("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();
  }
});

Answer 2

.live()语法更好,但我们现在必须使用.on().

您可以在文档上使用事件映射,将选择器作为第二个参数:

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