Question

我正在动态添加一些元素，现在我尝试使用hover()绑定和on()，但这似乎不适用于回调函数。任何想法？

的jQuery ：

$(document.body).on('hover', 'div.settings-container', function () {
     $(this).find('ul.settings-links').fadeIn();
}, function () {
     $(this).find('ul.settings-links').fadeOut();
});

简化了jsfiddle。

Answer 1

在jQuery中，$(selector).hover(handlerIn, handlerOut) 只是

的快捷方式

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

hover不是一个事件，您需要使用mouseenter和mouseleave。

$('body').on({
  mouseenter: function() {
     $(this).find('ul.settings-links').fadeIn();
  },
  mouseleave: function() {
     $(this).find('ul.settings-links').fadeOut();
  }
}, 'div.settings-container');

Answer 2

方法“on”使用“hover”作为两个事件的快捷方式 - mouseenter和mouseleave使用event.type来检测它们

$(document).on('hover', 'a.hover-me', function (e) {
    if (e.type == "mouseenter") {
        alert("show");
    } else {
        alert("hide");
    }
});

Fiddle

Answer 3

无法同时使用.on()和hover事件！：（

作为后备，您可以使用此脚本：

$("div.settings-container").on({
    mouseenter: function () {
        alert("Mouse Over!");
    },
    mouseleave: function () {
        alert("Mouse Out!");
    }
});

小提琴：http://jsfiddle.net/mFeVX/2/

Answer 4

请尝试mouseenter和mouseout代理事件......无法将.hover()与.on()一起使用..

Answer 5

关于on

上有关jquery文档的其他说明

从jQuery 1.8开始不推荐使用：名称“hover”用作简写字符串“mouseenter mouseleave”。它附加一个事件处理程序对于这两个事件，处理程序必须检查event.type 确定事件是否为mouseenter或mouseleave。不要将“hover”伪事件名称与.hover（）方法混淆接受一个或两个功能。

因此，当您将hover与on一起使用时，它假定您正在使用此hover

A function to execute when the mouse pointer enters or leaves the element.

因此要么使用，

$(document).on('hover', 'ul.settings-links', function (e) {
    if (e.type == "mouseenter") {
        alert("show");
    } else {
        alert("hide");
    }
});

OR

$('body').on({
  mouseenter: function() {
     $(this).find('ul.settings-links').fadeIn();
  },
  mouseleave: function() {
     $(this).find('ul.settings-links').fadeOut();
  }
}, 'div.settings-container');

您无法使用接受两个功能作为参数的hover。

Answer 6

检查此FIDDLE

 $('a.hover-me').on({
     mouseenter: function(){
       $('.test').show();
     },
     mouseleave: function(){
      $('.test').hide();
    }
});

使用on（）和绑定悬停回调函数？

6 个答案:

小提琴：http://jsfiddle.net/mFeVX/2/