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 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
JS解析XML实例分析
Jan 30 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
Javascript实现单例模式
Jan 24 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
Python二元算术运算常用方法解析
2020/09/15 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
邮政员工辞职信
2014/01/16 职场文书
超市创业计划书
2014/04/24 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
中学社团活动总结
2015/05/07 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
初中班主任心得体会
2016/01/07 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书