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实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
js登录弹出层特效
Mar 07 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 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 更新数据库中断的解决方法
2009/06/05 PHP
用php解析html的实现代码
2011/08/08 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python开发的HTTP库requests详解
2017/08/29 Python
简单了解python代码优化小技巧
2019/07/08 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
python 模拟登陆github的示例
2020/12/04 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
什么是GWT的Module
2013/01/20 面试题
自我鉴定书范文
2013/10/02 职场文书
医学检验专业自荐信
2014/09/18 职场文书
2014最新实习证明模板
2014/10/02 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL