javascript - 带有 on() 和绑定的悬停回调函数？

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不是事件，您需要使用mouseenterandmouseleave来代替。

$('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");
    }
});​

小提琴

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

从关于 jquery docs on on

自 jQuery 1.8 起已弃用：名称“hover”用作字符串“mouseenter mouseleave”的简写。它为这两个事件附加了一个事件处理程序，处理程序必须检查 event.type 以确定事件是 mouseenter 还是 mouseleave。不要将“悬停”伪事件名称与接受一两个函数的 .hover() 方法混淆。

因此，当您使用hoverwith时on，它假定您正在使用此悬停，即

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接受两个函数作为参数的 which。

Answer 6

检查这个小提琴

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