注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

@fc_lamp

关注Web应用解决方案MySql/PHP/Python一盏名为"飞川"的灯~

 
 
 

日志

 
 

关于 jquery 1.7 版本中live()事件与jquery 1.10版本中的on()事件(动态绑定)问题  

2015-03-04 15:21:13|  分类: Web技术-Js/Html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一 说明:
      关于live()与on()的详细说明,请GOOGLE。不过,需要注意的是从1.7版本后,live()事件已不存。官方使用on()事件。

二 关于on:
  手册:

events,[selector],[data],fnV1.7

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代(此参数是可以作用于动态绑定的后代元素的,类似live())。如果选择的< null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

  实例:比如我们有一个循环列表,其中当鼠标指到某一块的时候,某一块的内容就是显示。我们使用jquery的hover()事件是很容易实现此功能的。当,如果说循环块是JS动态插入进来时,直接使用hover()就不行了,因为事件的元素根本没有在DOM里。如果你使用的是jquery 1.7版本,则可使用live来实现。如下:
循环块:

<div class="pro-list">

<div class="pro-item"><!-- 这个是循环块 -->
<div class="toggleshow">
这里是JS动态显示1
</div>
</div>

<div class="pro-item"><!-- 这个是循环块 -->
<div class="toggleshow">
这里是JS动态显示2
</div>
</div>

</div>

简单的live()实现:

$(".toggleshow").live("mousemove",function(){

      $(this).show();
});
    $(".toggleshow").live("mouseout",function(){

        $(this).hide();
});
如果是非jquery1.7版本,则我们使用on()事件来实现。

on()事件来实现:
  不过,使用on()事件之前on的初始作用对象也必须在DOM里,动态插入的元素写入选择器即可。
  
//.pro-list元素必须初始时存在(一般我们使用body),.pro-item作为动态插入的后代元素。
$(".pro-list").on("mouseover mouseout",'.pro-item',function(event){ 
    
     if(event.type == "mouseover"){
     $(this).find('.toggleshow').show();
     }else if(event.type == "mouseout"){
     $(this).find('.toggleshow').hide();
     }
    });

    
  评论这张
 
阅读(273)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017