Jquery.Hover 不适用于动态元素答案

【问题标题】：Jquery.Hover not working for dynamic ElementJquery.Hover 不适用于动态元素
【发布时间】：2011-12-19 19:39:52
【问题描述】：

这是我的代码

$(".inboxfeedlist li").hover(function(e){alert('');}

这不适用于动态创建的元素，即使我使用过

$(".inboxfeedlist li").bind('hover',function(){})

也不行，代码有什么问题。

【问题讨论】：

你能在jsfiddle.net上尽可能模拟你的情况吗？

标签： jquery html dynamic hover

【解决方案1】：

live 在 jQuery 1.9 中被弃用。我们可以将on 与mouseenter 和mouseleave 事件一起使用：

$(document).on("mouseenter", ".save-btn", function(e) {
    $(this).css("background-image","url('ie/imgs/btn/hover-btn.png')");
    $(this).find("a").css("background-image","url('ie/imgs/btn/hover-btn-left.png')");
});

$(document).on("mouseleave", ".save-btn", function(e) {
    $(this).css("background-image","url('ie/imgs/btn/btn.png')");
    $(this).find("a").css("background-image","url('ie/imgs/btn/btn-left.png')");
});

由于某种原因，我不能将hover 与on 一起使用。它根本行不通。但是，根据我的阅读，hover 只是对 mouseenter 和 mouseleave 的改编，所以没问题。 (https://stackoverflow.com/a/4463384/1031340)

如果您不需要支持 IE6，我建议您在 CSS 上使用:hover（如果只是 CSS 中的更改，请参见上面的示例）。

【讨论】：

在未动态更改的元素上使用“on”事件很重要。
在某些情况下我们想要显示/隐藏内容，mouseenter/mouseleave 组合对我来说效果更好
mouseover 语法不正确，应该使用 mouseenter：api.jquery.com/on/#additional-notes

【解决方案2】：

使用live方法：

$(".inboxfeedlist li").live('hover', function(e){alert('');});

附注hover 确实有两个回调函数，你的意思是mouseover

【讨论】：

你每天都会学到一些新东西......，仍然想知道这将是什么用例？还没有问题，这需要这个。
我在切换$(".menu li").hover(function(){$(".submenu",this).toggle()}) 之类的东西时使用它。因为 toggle 取决于元素的当前状态，所以可以用于悬停和悬停。
为什么.live('hover' ... 在动态元素上有效，而.hover 无效？
从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该优先使用 .delegate() 而不是 .live()。 api.jquery.com/live

【解决方案3】：

试试live

$(".inboxfeedlist li").live('hover',function(){});

【讨论】：

【解决方案4】：

使用delegate 或live 绑定事件。这将确保动态添加的任何内容也将绑定到事件处理程序。

【讨论】：

【解决方案5】：

听起来你需要live 或delegate。代表优先

$(document.body).delegate(".inboxfeedlist li", "hover", function(){
        alert('');
});

【讨论】：

【解决方案6】：

$('.inboxfeedlist li').live('hover', function(e) { alert(''); });

jQuery live

jQuery delegate

【讨论】：

【解决方案7】：

你可以这样使用：

$(document).on('mouseover','div.cover-wrapper',function(){
    $(this).css({'border':'1px solid #000'});
});


$(document).on('mouseout','div.cover-wrapper',function(){
    $(this).css({'border':'none'});
});

【讨论】：

【解决方案8】：

这里是这些功能的使用和细节

http://api.jquery.com/live/

$(选择器).live(事件、数据、处理程序); // jQuery 1.3+

$( 文档 ).delegate( 选择器、事件、数据、处理程序); // jQuery 1.4.3+

$( 文档 ).on( 事件、选择器、数据、处理程序); // jQuery 1.7+

【讨论】：