jquery - 是否可以使用 jQuery .on 和悬停？

Question

我有一个 <ul>在初始页面加载后用 javascript 填充。我目前正在使用 .bind与 mouseover和 mouseout .

该项目刚刚更新到 jQuery 1.7，所以我可以选择使用 .on , 但我似乎无法让它与 hover 一起使用.是否可以使用 .on与 hover ？

编辑:我绑定(bind)的元素在文档加载后使用 javascript 加载。这就是我使用 on 的原因而不仅仅是 hover .

Answer 1

(如果您需要将 .on() 与填充有 JavaScript 的元素一起使用，请查看此答案中的最后编辑)

将此用于未使用 JavaScript 填充的元素:

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover() 有自己的处理程序:http://api.jquery.com/hover/

如果你想做多件事，将它们链接到 .on() 处理程序中，如下所示:

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

根据下面提供的答案，您可以将 hover 与 .on() 一起使用，但是:

Although strongly discouraged for new code, you may see the pseudo-event-name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

此外，使用它没有性能优势，而且比仅使用 mouseenter 或 mouseleave 更笨重。我提供的答案需要更少的代码，是实现类似目标的正确方法。

编辑

自从回答这个问题以来已经有一段时间了，它似乎获得了一些关注。上面的代码仍然有效，但我确实想在我原来的答案中添加一些内容。

虽然我更喜欢将 mouseenter 和 mouseleave (帮助我理解代码中发生的事情)与 .on() 一起使用，但它只是与使用 hover()

编写以下内容相同

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

由于最初的问题确实询问了如何将 on() 与 hover() 一起正确使用，所以我想我会更正 on() 的用法 并且当时没有发现有必要添加 hover() 代码。

2012 年 12 月 11 日编辑

下面提供的一些新答案详细说明了如果所讨论的 div 是使用 JavaScript 填充的，.on() 应该如何工作。例如，假设您使用 jQuery 的 .load() 事件填充 div，如下所示:

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

上面的 .on() 代码是站不住脚的。相反，您应该稍微修改您的代码，如下所示:

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

此代码适用于在 .load() 事件发生后用 JavaScript 填充的元素。只需将您的参数更改为适当的选择器即可。