是否可以使用 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屋!