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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
javascript的对话框详解与参数
Mar 08 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
微信小程序上传图片到php服务器的方法
May 23 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
在线短消息收发的程序,不用数据库
2006/10/09 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
python实现的文件夹清理程序分享
2014/11/22 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
python 贪心算法的实现
2020/09/18 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
体育专业求职信
2014/07/16 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
Python Numpy库的超详细教程
2022/04/06 Python
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle