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

问题描述

我有一个<ul>，它在初始页面加载后填充了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:

尽管强烈建议不要使用新代码，但您可能会看到 伪事件名称悬停"用作字符串的简写 "mouseenter mouseleave".它为那些附加单个事件处理程序 两个事件，处理程序必须检查event.type以确定 事件是mouseenter还是mouseleave.不要混淆 使用.hover()方法的"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.

虽然我更喜欢在.on()中使用mouseenter和mouseleave(可帮助我理解代码中发生的事情)，但与在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日修改

下面提供的一些新答案详细说明了如果使用JavaScript填充有问题的div时.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屋！