Javascript 带on（）和绑定的悬停回调函数？

您好，我正在动态添加一些元素，现在我正在尝试使用

on（）

绑定和一个

hover（）

，但这似乎不适用于回调函数。有什么想法吗

jQuery：

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

---

简化了计算过程

不能同时使用

.on（）

和

悬停事件！：(

作为回退，您可以使用以下脚本：

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

Fiddle:在jQuery中，
$（选择器）。悬停（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');

尝试使用
mouseenter
和
mouseeout
来代理事件…不能将
.hover（）
与
.on（）
一起使用。
方法“on”使用“hover”作为两个事件的快捷方式-mouseenter和mouseleave使用event.type来检测它们

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

来自jquery文档的附加说明

从jQuery 1.8起已弃用：名称“hover”用作
字符串“mouseenter mouseleave”。它附加一个事件处理程序
对于这两个事件，处理程序必须检查event.type以
确定事件是mouseenter还是mouseleave。不要
将“hover”伪事件名称与.hover（）方法混淆，后者
接受一个或两个函数

因此，当您将
悬停
与
一起使用时，它假定您使用的是

因此,

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

您不能使用
悬停
，它接受两个函数作为参数。
检查此项

@Sushanth——你注意到小提琴了吗？这会绑定
div.settings-container
，并动态添加它，对吗？@Dejan.S不，事件被委托给body。只是为了澄清一下，即使我动态添加
div
，它也会在悬停时触发？
$(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');

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