hover()和blur()是jQuery中常用的两个方法,一般用于鼠标悬停操作.当页面元素动态生成时,一般使用代理delegate来触发一些事件(比如click).但是,在一些版本的jq中,delegate是无法使用hover和blur的.

今天就遇到了这样的小问题:

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
$('.status_on').hover(function(){
$(this).html('点击禁用');
$(this).css('color','red');
},function(){
$(this).html('已激活');
$(this).css('color','green');
});
});

但是当需要触发hover的元素是js后来生成的时候,hover是无效的.
于是第一反应是想到用delegate代理:

1
2
3
4
5
6
7
8
 $(document).delegate('.status_on','hover',function(){
$(this).html('点击禁用');
$(this).css('color','red');
});
$(document).delegate('.status_on','blur',function(){
$(this).html('已激活');
$(this).css('color','green');
});

结果还是不行=.=
为什么呢?

因为hover不是标准的事件,因此无法直接使用live和delegate进行处理

同理,blur也是.

知道了原因,解决方法就很简单了,用mouseenter和mouseleave替代hover和blur就行了:

1
2
3
4
5
6
7
8
$(document).delegate('.status_on','mouseenter',function(){
$(this).html('点击禁用');
$(this).css('color','red');
});
$(document).delegate('.status_on','mouseleave',function(){
$(this).html('已激活');
$(this).css('color','green');
});

参考链接:
jQuery 的 live() 方法对 hover 事件的处理

如未特殊注明,本站文章均为原创

转载请注明:转载自quericy的博客(https://quericy.me)

本文链接地址: jQuery中hover和blur使用代理delegate无效的解决方法