我有一个<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/