jQuery有鼠标输入或鼠标输出的开启/实时悬停功能吗？

Question

我基本上遇到了一些问题，我正在运行一个插件，它动态地将数据标签ID添加到data-*属性中。

出于某种原因，这意味着所有项都是动态添加的，并且我在相同的列表元素上运行的另一个函数不会运行，因为事件不是动态附加的。

发生的情况是: 1)页面渲染2)当DOM加载时，我的'other‘功能可用3)页面加载，插件代码可用，但我的'other’功能(添加一个来自下面的悬停框标题并向上动画)不再起作用。因此，在其他插件生效之前，它基本上是有效的。

到目前为止，我的发现是：

我可以使用jQuery 'on‘将事件动态地附加到动态编辑/创建的项( #stage li项)。使用以下命令：

$('body').on('hover', '#stage li', function() {
    // Do dynamic stuff
}

但这只适用于一次悬停，并没有给我一个我真正需要的鼠标输入/鼠标输出的解决方案。有没有人对如何做到这一点有什么想法？

Answer 1

是的：

$('#stage').on({
    mouseenter: function(){
        // do mouseentery shtuff
    },
    mouseleave: function(){
        // mouse bye bye
    }
},'li');

将.on()事件绑定从body更改为#stage并从中过滤li，因为这样会更快。

这种方式( XML方式)最酷的一点是，您可以轻松地向其中添加更多内容……添加鼠标移动函数只是同一项中另一个逗号和下面的函数，所有这些都包含在一个.on()绑定中。:)

Answer 2

这就是你要找的东西。另外，请注意，自jQuery 1.9起不再支持悬停

$('mydiv').on('mouseenter', '#stage li', function( event ) {
    // do something
}).on('mouseleave', '#stage li', function( event ) {
    // do something different
});