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

(Look at the last edit in this answer if you need to use 100 with elements populated with 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()相加，但是:

尽管强烈建议您使用新代码，但您可能会看到 用作字符串速记的伪事件名称"hover" "鼠标输入鼠标离开".它为这些附加了单个事件处理程序 两个事件，处理程序必须判断event.type以确定 事件是鼠标输入还是鼠标离开.请不要混淆 使用.hover()方法"hover"伪事件名，该方法接受一个 或者两个功能.

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

EDIT个

这个问题已经有一段时间没有得到回答了，而且似乎已经获得了一些吸引力.上面的代码仍然有效，但我确实想在我的原始答案中添加一些内容.

虽然我更喜欢在.on()中使用mouseenter和mouseleave(帮助我理解代码中发生的事情)，但它与使用hover()编写以下内容是一样的

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

因为原来的问题确实问他们如何正确地使用on()和hover()，我想我应该纠正on()的用法，当时没有必要添加hover()代码.

EDIT DECEMBER 11, 2012个

下面提供的一些新答案详细说明了如果使用JavaScript填充有问题的div,.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填充的元素.只需将参数更改为适当的 Select 器.