jquery中hover和blur使用delegate失效的解决办法

yingzizizizizizzz

于 2017-06-20 10:52:55 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/yingzizizizizizzz/article/details/73481202

jQuery 专栏收录该内容

14 篇文章

订阅专栏

在尝试为动态生成的span绑定hover事件以显示放大镜图片时，遇到jQuery的delegate方法失效。分析发现，从jQuery 1.9开始，由于hover和blur不是标准事件，delegate无法处理。解决方案是改用mouseenter和mouseleave来替代，问题得到解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我想要实现，动态生成的span，再绑定hover事件，使得悬浮到span上时出现放大镜图片

结果遇到了

$("#jnBrandList").delegate(".imageMask", "hover", function(){
        $(this).toggleClass("imageOver");
    });

就是不执行的情况。

一开始以为是我使用的jquery不支持delegate动态绑定事件，但是jquery1.8以后是支持的，所以排除。

后来看到了这篇博客http://www.thinksaas.cn/topics/0/455/455142.html 说delegate失效的原因是要绑定的事件不支持事件冒泡，而因为delegate原理是依靠事件冒泡处理的所以delegate会失效。于是，想到可能的事件的原因，后来查到原因。是jquery1.9之后，因为hover、blur不是标准的事件，因此无法直接使用live和delegate进行处理。可以用mouseenter和mouseleave代替。果然问题解决了。

$("#jnBrandList").delegate(".imageMask", "mouseenter mouseleave", function(){
        $(this).toggleClass("imageOver");
    });