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 事件的处理