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 相关文章推荐
用JS实现一个页面多个css样式实现
May 29 Javascript
JS 遮照层实现代码
Mar 31 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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
CodeIgniter安全相关设置汇总
2014/07/03 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
简单介绍Python中的几种数据类型
2016/01/02 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Django 再谈一谈json序列化
2020/03/16 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
《少年王勃》教学反思
2014/04/27 职场文书
先进个人材料怎么写
2014/12/30 职场文书
法制教育观后感
2015/06/17 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP