Question

以下代码有效 -

$("#x").hover(function() {
alert("hovered");
});

但是下面的代码没有。请解释原因？

$("#x").on("hover", function() {
alert("hovered");
});

注意 - #x是一个按钮元素。以上代码适用于＆＃34;点击＆＃34;事件

Answer 1

来自jQuery .on()'s documentation：

在jQuery 1.8中弃用，在1.9中删除：名称"hover"用作字符串"mouseenter mouseleave"的简写。它为这两个事件附加了一个事件处理程序，处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。不要将"hover"伪事件名称与.hover()方法混淆，后者接受一个或两个函数。

您可以将对象传递给on方法：

$("#x").on({
   mouseenter: function() {
     // ...
   },
   mouseleave: function() {
     // ...
   }
});

如果你想委派事件：

$('#aStaticParentOfX').on({
   mouseenter: function() {
     // ...
   },
   mouseleave: function() {
     // ...
   }
 }, "#x");

Answer 2

即使.live()已从jQuery 1.9中删除，如果您的版本低于1.9，也可以使用

$("#x").live("hover", function() {
    alert("hovered");
});

Answer 3

试试这个..

$("#x").on("mouseover", function () {
     //wrire your code here
});

如果您通过javascript填充元素，请使用以下内容。它取代了已弃用的jQuery.live。

$("body").on("mouseover","#x", function () {
     //wrire your code here
});

请参阅此js fiddle http://jsfiddle.net/3aq48p5m/3/

Answer 4

首先：jQuery hover需要2个函数作为参数更多信息：http://api.jquery.com/hover/

$('#x').hover(
    function() {
        // your 'mouseenter' event handle
    }, function() {
        // your 'mouseleave' event handle
});

第二：如果你的代码在相同的元素上运行，你可以简单地使用CSS hover伪类（#x）

#x:hover {
    // this will be added to #x when 'mouseenter', and remove when 'mouseleave'
    background-color: red;
}

jQuery悬停事件无法识别

4 个答案: