0

我基本上在 <li> 的项目上遇到了一些麻烦，我正在运行一个插件，该插件会动态地将数据标签 ID 添加到 data-* 属性中。

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

发生的情况是：1）页面呈现 2）我的“其他”功能在 DOM 加载时可用 3）页面加载，插件代码可用，但我的“其他”功能（它添加了一个来自下方的悬停框标题和动画）不再起作用。所以它基本上可以工作，直到另一个插件启动。

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

我可以使用 jQuery 'on' 将事件动态附加到动态编辑/创建的项目（#stage li 项目）。使用这个：

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

但这仅适用于 1 次悬停，并没有为我提供我真正需要的 mouseenter/mouseout 解决方案。有没有人对如何做到这一点有任何想法？

4

2 回答 2

3

是的：

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

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

以这种方式（XML 方式）这样做很酷的一点是，您可以轻松地向其中添加更多内容……添加 mousemove 函数只是同一项目中的另一个逗号和函数，所有内容都包含在一个 .on 中（） 捆绑。:)

于 2013-02-26T21:35:12.330 回答
0

这就是您要查找的内容。另外，请注意，从 jQuery 1.9 开始不再支持悬停

$('mydiv').on('mouseenter', '#stage li', function( event ) {
    // do something
}).on('mouseleave', '#stage li', function( event ) {
    // do something different
});
于 2013-02-26T21:35:47.047 回答