关于jQuery事件绑定
转自:http://www.cnblogs.com/gaojun/p/3497582.html
html:
<a href="#" onclick="addBtn()">addBtn</a> <div id="mDiv"> <button class="cBtn" onclick="alert(11111)">button1</button> <button class="cBtn">button2</button> <button class="cBtn">button3</button> </div>
javascript:
<script type="text/javascript">
function addBtn(){
$('#mDiv').append(' <button class="cBtn">button5</button>')
}
jQuery(function($){
//使用on代替live和delegate(live由于性能原因已经被废弃,被delegate代替),新添加到mDiv的button依然会有绑定的事件
$('#mDiv').on('click','.cBtn',function(index, eleDom){
alert($(this).html())
});
//使用on代替bind
$('.cBtn').on('click',function(){
alert($(this).html())
})
//注意:
/*
1、无论使用bind、on、delegate、click(function())都是重复绑定,即绑定的同类型事件被放到一个事件队列中,依次执行,后绑定的事件不会替换之前绑定的,对于on使用off,delegate用undelegate,bind及click使用unbind来解除绑定,例如unbind(type)传递为事件类型,如果不传type则解出所有事件绑定;需要注意的是元素本身自带的事件无法unbind(如button1)
2、要绑定自定义事件,如'open',以上函数都可以使用,但激活需要使用trigger 总结:
建议使用on函数,绑定形式为$('.myClass').on({
click:function(eleDom){
...do someting...
},
dbclick:function(eleDom){
...do someting...
}
....
})
*/
}
</script>
一些说明:
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
$("a").bind("click",function(){alert("ok");});
live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的
$("a").live("click",function(){alert("ok");});
delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
$("#container").delegate("a","click",function(){alert("ok");})
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
差别:
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理,性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制
关于jQuery事件绑定的更多相关文章
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jQuery事件绑定、解绑、命名空间
jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- JQuery事件绑定,bind与on区别
jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...
- jQuery事件绑定和委托实例
本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() . bind() . live() . delegate ...
- jQuery事件绑定.on()简要概述及应用
原文地址:http://www.jquerycn.cn/a_5346 前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看 ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...
- jQuery事件绑定和委托
可以用多种方法实现,on() . bind() . live() . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: $("#div1"). ...
- jQuery事件绑定的最佳实践
如果你经常使用jQuery,那么你也许很熟悉事件绑定.这是很基本的东西,但是深入一点,你就能够找到机会让你事件驱动的代码变得不太零碎,并且更容易管理. 更好的选择器策略 让我们从基础的例子开始.下面的 ...
随机推荐
- libtool: line 990: g++: command not found的解决
yum -y install gcc+ gcc-c++
- angularJS之$watch的一个小介绍
现在最近公司项目使用angularJS进行开发:以前也接触过但是不多,趁着现在熟悉回来. 如题,angular中$watch也是我们在开发的时候需要的各种监听: $watch接收3个参数,第一个是对象 ...
- Android setVisibility()
android view setVisibility(): 有三个参数:Parameters:visibility One of VISIBLE, INVISIBLE, or GONE,想对应的三个常 ...
- linux修改时间
1.修改linux系统时间 [root@localhost ~]# date -s "2016-10-15 13:15:12" 2.将系统时间和网络服务器时间同步 [root@lo ...
- Big String-POJ2887块状数组
Time Limit: 1000MS Memory Limit: 131072K Description You are given a string and supposed to do some ...
- Android 秒级编译 Freeline
http://mp.weixin.qq.com/s?__biz=MzA4NTQwNDcyMA==&mid=2650662410&idx=1&sn=c654fa7b0cc8c91 ...
- IBM X3850 Windows 无法安装到这个磁盘。选中的磁盘具有MBR分区表。在 EFI 系统上,Windows 只能安装到 GPT 磁盘
以前安装的是window2003 32位, 改装为2012 64位的时候.出现 Windows 无法安装到这个磁盘.选中的磁盘具有MBR分区表.在 EFI 系统上,Windows 只能安装到 GPT ...
- php 5.3新增的闭包语法介绍function() use() {}
* 下面提到的代码在PHP5.3以上版本运行通过. */function callback($callback) { $callback();}//输出: This is a anonymous fu ...
- CodeUI Test:创建第一个CodeUI Test
CodeUI Test是微软自动化测试的一个比较好的项目,它的原理是获取到Windows窗口上的控件,然后针对控件的部分属性进行获取和对比,模拟对控件进行点击.双击.右键点击等事件.这样可以录制用户测 ...
- avalon复杂绑定
样式操作:ms-css-样式名=“样式值”,ms-class ms-css-width="prop"(自动补px) ms-css-height="{{prop}}%&qu ...