可以使用jQuery.on和hover吗？

我有一个

，它在初始页面加载后填充了javascript。我目前正在使用

.bind

和

mouseover

以及

mouseout

该项目刚刚更新为jQuery 1.7，因此我可以选择在上使用

，但我似乎无法使它与
悬停
一起工作。是否可以将
.on
与
悬停一起使用

编辑：我绑定到的元素在文档加载后用javascript加载。这就是为什么我在
上使用
，而不仅仅是
悬停
（如果需要使用
.on（）
和JavaScript填充的元素，请查看此答案中的最后一次编辑）

对未使用JavaScript填充的元素使用此选项：

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover（）
有自己的处理程序：

如果要执行多项操作，请在
.on（）
处理程序中链接它们，如下所示：

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

根据下面提供的答案，您可以将
悬停
与
.on（）
一起使用，但是：

尽管强烈反对使用新代码，但您可能会看到
伪事件名称“hover”用作字符串的缩写
“mouseenter mouseleave”。它为这些事件附加一个事件处理程序
两个事件，处理程序必须检查event.type以确定
事件是mouseenter还是mouseleave。不要混淆主题
带有.hover（）方法的“hover”伪事件名，该方法接受一个
或者两个功能

此外，使用它没有性能优势，而且比仅使用
mouseenter
或
mouseleave
更笨重。我提供的答案需要更少的代码，这是实现类似目标的正确方法

编辑

这个问题已经有一段时间没有得到回答了，似乎已经获得了一些牵引力。上面的代码仍然有效，但我确实想在我的原始答案中添加一些内容

虽然我更喜欢使用
mouseenter
和
mouseleave
（帮助我理解代码中发生了什么）。on（）
与使用
hover（）编写以下内容一样

由于最初的问题问他们如何正确地使用
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));

发生
.load（）
事件后，此代码将适用于使用JavaScript填充的元素。只需将参数更改为适当的选择器。
我不确定Javascript的其余部分是什么样子，因此我无法判断是否存在任何干扰。但作为一项活动，它的效果很好

如果希望能够利用其事件，请使用事件返回的对象：

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

您可以按照“附加说明”部分的说明使用
悬停
：

尽管强烈反对使用新代码，但您可能会看到
伪事件名称“hover”用作字符串的缩写
“mouseenter mouseleave”。它为这些事件附加一个事件处理程序
两个事件，处理程序必须检查event.type以确定
事件是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”的简写。它附加了一个
这两个事件的事件处理程序，处理程序必须检查
event.type确定事件是mouseenter还是mouseleave。
不要将“hover”伪事件名称与.hover（）方法混淆，
它接受一个或两个函数

在将文档作为问题请求加载后创建的对象移到/移出时，这些解决方案都不适用于我。我知道这个问题由来已久，但对于那些仍在寻找答案的人，我有一个解决方案：

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

这将把函数绑定到选择器上，这样在文档准备好后使用此选择器创建的对象仍然可以调用它。
刚刚从web上浏览过，感觉我可以做出贡献。我注意到@calethebrewer发布的上述代码可能会导致通过选择器进行多次调用，并导致意外行为，例如：-

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

这把小提琴阐明了我的观点。当设置插件等元素的动画时，我发现这些多个触发器会导致意外行为，这可能会导致动画或代码被调用的次数超过必要的次数

我的建议是简单地用mouseenter/mouseleave替换：-

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

尽管这阻止了我的动画的多个实例被调用，但我最终还是使用了mouseover/mouseleave，因为我需要确定父级的子级何时被悬停在上面。
您可以提供一个或多个事件类型，它们之间用空格隔开

所以
hover
等于
mouseenter mouseleave

这是我的建议：

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

如果您需要将其作为其他事件的条件，我可以这样解决：

$('.classname').hover(
     function(){$(this).data('hover',true);},
     function(){$(this).data('hover',false);}
);

然后，在另一种情况下，您可以轻松地使用它：

 if ($(this).data('hover')){
      //...
 }

（我看到一些人使用
is（'：hover'）
来解决这个问题。但是这不是一个有效的jQuery选择器，并且不能在所有兼容的浏览器中工作）
jQuery插件hoverIntent比这里列出的简单方法更进一步。虽然它们确实可以工作，但它们可能不一定按照用户期望的方式工作

使用hoverInt的最有力理由
$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');

$('.classname').hover(
     function(){$(this).data('hover',true);},
     function(){$(this).data('hover',false);}
);

 if ($(this).data('hover')){
      //...
 }

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});