jQuery中bind与live的用法及区别小结


Posted in Javascript onJanuary 27, 2014

首先介绍这两个方法之前,我们常用的是click()方法

$("a").click(function() {
     alert("hello");
});

click()方法是bind()方法的一种简单方法。在bind()中,
jQuery所有JavaScript事件对象,比如focus, mouseover,和resize,
都是可以作为type参数传递进来的。

参数:type,[data],function(eventObject)
例如:

$("p").bind("click",function(){
     alert("hello");
})

也可以传参
var message = "how are you!";
$("p").bind("click",{msg:message},function(e){
     alert(e.data.msg);
})

live()给所有匹配的元素附加一个事件处理函数,
即使这个元素是以后再添加进来的也有效。如下:
<tr class="mytr">
     <td class="mytd">Click me</td>
</tr>
$(".mytd").bind("click",function(){
      alert("hello");
})

点击Clike me 会弹出hello

此时添加一个新的元素进来

$(".mytr").after("<tr><td class='mytd'>后加的</td></tr>");

这时 再使用bind点击"后加的"不会执行
改为使用live()方法
$(".mytd").live("click",function(){
 alert("hello");
})

.live()方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:
绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。
传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
Javascript 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
jQuery实现动画效果的简单实例
Jan 27 #Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 #Javascript
js修改原型的属性使用介绍
Jan 26 #Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 #Javascript
JS批量修改PS中图层名称的方法
Jan 26 #Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 #Javascript
购物车选中得到价格实现示例
Jan 26 #Javascript
You might like
对Session和Cookie的区分与解释
2007/03/16 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php 进度条实现代码
2009/03/10 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
php获取excel文件数据
2017/04/21 PHP
自制PHP框架之设计模式
2017/05/07 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
xml和web特殊字符
2009/04/28 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
python使用cookielib库示例分享
2014/03/03 Python
python+Django+apache的配置方法详解
2016/06/01 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
如何进行有效的自我评价
2013/09/27 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
班级标语大全
2014/06/21 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL