是否可以使用 jQuery .on 并悬停? [英] Is it possible to use jQuery .on and hover?

问题描述

我有一个

在初始页面加载后填充了 javascript.我目前正在使用 .bind 和 mouseover 和 mouseout.

I have a <ul> that is populated with javascript after the initial page load. I'm currently using .bind with mouseover and mouseout.

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

The project just updated to jQuery 1.7 so I have the option to use .on, but I can't seem to get it to work with hover. Is it possible to use .on with hover?

EDIT:我绑定到的元素在文档加载后用 javascript 加载.这就是为什么我使用 on 而不仅仅是 hover.

EDIT: The elements I'm binding to are loaded with javascript after the document loads. That's why I'm using on and not just hover.

推荐答案

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

(Look at the last edit in this answer if you need to use .on() with elements populated with JavaScript)

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

Use this for elements that are not populated using JavaScript:

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

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

.hover() has it's own handler: http://api.jquery.com/hover/

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

If you want to do multiple things, chain them in the .on() handler like so:

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

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

According to the answers provided below you can use hover with .on(), but:

尽管强烈反对新代码，但您可能会看到伪事件名称hover"用作字符串的简写鼠标输入鼠标离开".它为那些附加了一个事件处理程序两个事件，处理程序必须检查 event.type 以确定事件是 mouseenter 还是 mouseleave.不要混淆带有 .hover() 方法的悬停"伪事件名称，该方法接受一个或两个函数.

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 更笨重.我提供的答案需要较少的代码，并且是实现此类目标的正确方法.

Also, there are no performance advantages to using it and it's more bulky than just using mouseenter or mouseleave. The answer I provided requires less code and is the proper way to achieve something like this.

编辑

距离回答这个问题已经有一段时间了，它似乎获得了一些牵引力.上面的代码仍然有效，但我确实想在我原来的答案中添加一些东西.

It's been a while since this question was answered and it seems to have gained some traction. The above code still stands, but I did want to add something to my original answer.

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

While I prefer using mouseenter and mouseleave (helps me understand whats going on in the code) with .on() it is just the same as writing the following with hover()

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

由于最初的问题确实询问他们如何正确使用 on() 和 hover()，我想我会更正 on() 的用法，当时觉得没必要加hover()代码.

Since the original question did ask how they could properly use on() with hover(), I thought I would correct the usage of on() and didn't find it necessary to add the hover() code at the time.

编辑 2012 年 12 月 11 日

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

Some new answers provided below detail how .on() should work if the div in question is populated using JavaScript. For example, let's say you populate a div using jQuery's .load() event, like so:

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

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

The above code for .on() would not stand. Instead, you should modify your code slightly, like this:

$(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 的元素.只需将您的参数更改为适当的选择器即可.

This code will work for an element populated with JavaScript after a .load() event has happened. Just change your argument to the appropriate selector.

这篇关于是否可以使用 jQuery .on 并悬停?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！