我有一个<ul>,在初始页面加载后用javascript填充。我目前使用。bind与鼠标悬停和鼠标退出。
该项目刚刚更新到jQuery 1.7,所以我可以选择使用.on,但我似乎不能让它与悬浮。是否可以在鼠标悬停时使用。on ?
编辑:我要绑定的元素在文档加载后用javascript加载。这就是为什么我用on而不是hover。
我有一个<ul>,在初始页面加载后用javascript填充。我目前使用。bind与鼠标悬停和鼠标退出。
该项目刚刚更新到jQuery 1.7,所以我可以选择使用.on,但我似乎不能让它与悬浮。是否可以在鼠标悬停时使用。on ?
编辑:我要绑定的元素在文档加载后用javascript加载。这就是为什么我用on而不是hover。
当前回答
我不确定你的Javascript的其余部分看起来像什么,所以我不能告诉如果有任何干扰。但是.hover()作为.on()的事件工作得很好。
$("#foo").on("hover", function() {
// disco
});
如果你想利用它的事件,使用事件返回的对象:
$("#foo").on("hover", function(e) {
if(e.type == "mouseenter") {
console.log("over");
}
else if (e.type == "mouseleave") {
console.log("out");
}
});
http://jsfiddle.net/hmUPP/2/
其他回答
如果你需要它在其他事件中作为条件,我是这样解决的:
$('.classname').hover(
function(){$(this).data('hover',true);},
function(){$(this).data('hover',false);}
);
然后在另一个事件中,你可以很容易地使用它:
if ($(this).data('hover')){
//...
}
(我看到一些人使用is(':hover')来解决这个问题。但这不是一个有效的jQuery选择器,并不能在所有兼容的浏览器中工作)
当把鼠标移到/移出在文档按照问题请求加载后创建的对象时,这些解决方案都不适合我。我知道这个问题很老了,但对于那些还在寻找的人,我有一个解决方案:
$("#container").on('mouseenter', '.selector', function() {
//do something
});
$("#container").on('mouseleave', '.selector', function() {
//do something
});
这将把函数绑定到选择器上,这样在文档准备好之后创建的带有该选择器的对象仍然能够调用它。
可以提供一个或多个事件类型,用空格分隔。
所以hover = mouseenter mouseleave。
我的建议是:
$("#foo").on("mouseenter mouseleave", function() {
// do some stuff
});
你可以使用.on()与hover通过做附加注释部分说:
虽然强烈不建议使用新代码,但是您可能会看到 伪事件名称“hover”用作字符串的简写 “mouseenter mouseleave”。它为这些附加了一个事件处理程序 两个事件,处理程序必须检查事件。要确定的类型 事件是mouseenter还是mouseleave。不要混淆 使用.hover()方法的"hover"伪事件名称,该方法接受一个 或者两个函数。
这将是做以下工作:
$("#foo").on("hover", function(e) {
if (e.type === "mouseenter") { console.log("enter"); }
else if (e.type === "mouseleave") { console.log("leave"); }
});
编辑(注意jQuery 1.8+用户):
在jQuery 1.8中已弃用,在1.9中被移除:将“hover”这个名称用作 字符串“mouseenter mouseleave”的简写。它连着一个 这两个事件的事件处理程序,处理程序必须检查 事件。类型以确定事件是mouseenter还是mouseleave。 不要将"hover"伪事件名称与.hover()方法混淆, 它接受一两个函数。
我不确定你的Javascript的其余部分看起来像什么,所以我不能告诉如果有任何干扰。但是.hover()作为.on()的事件工作得很好。
$("#foo").on("hover", function() {
// disco
});
如果你想利用它的事件,使用事件返回的对象:
$("#foo").on("hover", function(e) {
if(e.type == "mouseenter") {
console.log("over");
}
else if (e.type == "mouseleave") {
console.log("out");
}
});
http://jsfiddle.net/hmUPP/2/