我有一个<ul>,在初始页面加载后用javascript填充。我目前使用。bind与鼠标悬停和鼠标退出。
该项目刚刚更新到jQuery 1.7,所以我可以选择使用.on,但我似乎不能让它与悬浮。是否可以在鼠标悬停时使用。on ?
编辑:我要绑定的元素在文档加载后用javascript加载。这就是为什么我用on而不是hover。
我有一个<ul>,在初始页面加载后用javascript填充。我目前使用。bind与鼠标悬停和鼠标退出。
该项目刚刚更新到jQuery 1.7,所以我可以选择使用.on,但我似乎不能让它与悬浮。是否可以在鼠标悬停时使用。on ?
编辑:我要绑定的元素在文档加载后用javascript加载。这就是为什么我用on而不是hover。
当前回答
当把鼠标移到/移出在文档按照问题请求加载后创建的对象时,这些解决方案都不适合我。我知道这个问题很老了,但对于那些还在寻找的人,我有一个解决方案:
$("#container").on('mouseenter', '.selector', function() {
//do something
});
$("#container").on('mouseleave', '.selector', function() {
//do something
});
这将把函数绑定到选择器上,这样在文档准备好之后创建的带有该选择器的对象仍然能够调用它。
其他回答
你可以使用.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填充的元素使用.on(),请查看这个答案的最后一个编辑)
对于没有使用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
}
});
根据下面提供的答案,你可以用.on()来使用hover,但是:
虽然强烈不建议使用新代码,但是您可能会看到 伪事件名称“hover”用作字符串的简写 “mouseenter mouseleave”。它为这些附加了一个事件处理程序 两个事件,处理程序必须检查事件。要确定的类型 事件是mouseenter还是mouseleave。不要混淆 使用.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()代码。
编辑2012年12月11日
下面提供了一些新的答案,详细说明如果使用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填充的元素。只需将参数更改为适当的选择器。
我不确定你的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/
当把鼠标移到/移出在文档按照问题请求加载后创建的对象时,这些解决方案都不适合我。我知道这个问题很老了,但对于那些还在寻找的人,我有一个解决方案:
$("#container").on('mouseenter', '.selector', function() {
//do something
});
$("#container").on('mouseleave', '.selector', function() {
//do something
});
这将把函数绑定到选择器上,这样在文档准备好之后创建的带有该选择器的对象仍然能够调用它。
刚从网上浏览过来,觉得我能帮点忙。我注意到@calethebrewer发布的上述代码可能会导致对选择器的多次调用和意想不到的行为,例如:-
$(document).on('mouseover', '.selector', function() {
//do something
});
$(document).on('mouseout', '.selector', function() {
//do something
});
这把小提琴http://jsfiddle.net/TWskH/12/说明了我的观点。当动画元素时,比如在插件中,我发现这些多个触发器会导致意想不到的行为,这可能会导致动画或代码被调用的次数超过必要的次数。
我的建议是简单地替换为mouseenter/mouseleave: -
$(document).on('mouseenter', '.selector', function() {
//do something
});
$(document).on('mouseleave', '.selector', function() {
//do something
});
虽然这阻止了我的动画被调用的多个实例,但我最终还是使用了mouseover/mouseleave,因为我需要确定什么时候父对象的子对象被悬停。