jquery 使用on方法给元素绑定事件
on方法在1.7版本中开始出现的,现在已经优先考虑on,并不是bind方法了。
on( events [,selector] [,data] ,handler)
event:为事件类型,可以有多个事件类型。
selector:可选,过滤绑定在on方法上的后代元素。注:如果有selector,on方法是采用事件代理,这样可以提升代码性能。
data:可选,当事件被触发时,它会传给event.data,从而可以加以利用
handler:当事件被触发时,执行的方法。
$(document).on("blur","#padRadius",{name:"vichin"},function(event){
alert(event.data.name)
});
$(document).on("blur", "#padRadius", function () {
alert("hello word!");
});
等同于bind的用法
$("#div1").on("click",function(){
alert("Hello word");
});
$("#div1").click(function(){
});
这种写法在1.7之前是bind的简写,在1.7之后,就是on的简写
解绑:
$("#div1").off("click");
jquery 使用on方法给元素绑定事件的更多相关文章
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
- jQuery中对未来的元素绑定事件
对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- jQuery中对未来的元素绑定事件用bind、live or on
对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...
- jQuery给动态添加的元素绑定事件的方法
我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv"> <ul></ul> </d ...
- jQuery对 动态添加 的元素 绑定事件(on()的用法)
从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
- jquery给动态生成的元素绑定事件,on函数
首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...
- jquery append 动态添加的元素绑定事件on
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery html动态添加的元素绑定事件详解
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...
随机推荐
- iview之tabs嵌套
iview之tabs嵌套 说明: iview组件中当嵌套使用 Tabs时,需要在Tabs中指定 name 属性来区分层级,然后在TabPane 中设置 tab 属性指向对应 Tabs 的 name 字 ...
- WPF:元素绑定
到目前为止都在讨论如何链接两个元素的绑定.但在数据驱动的应用程序中,更常见的情况是创建从不可见的对象中提取数据绑定表达式.唯一的要求是希望显示的信息必须存储在公有的属性中.WPF数据绑定基础结构不能获 ...
- 小P的架构生活(下)
小L强烈建议团队使用微服务,并极力推荐了前公司用的一套分布式事务解决方案. 小P经过反复思考查证并做了大量的尝试后,辨证地对微服务架构做了如下分析: 为什么要用微服务,微服务带来了哪些好处? 1.减少 ...
- shell中数字大小的比较
[整数之间的比较] 示例脚本: #!/bin/bash if [ $1 -gt $2 ] then echo "参数$1大于参数$2" else echo "参数$1小于 ...
- 2019-2020-1 20199319《Linux内核原理与分析》第五周作业
系统调用的三层机制(上) 基础知识 1.通过库函数的方式进行系统调用,库函数用来把系统调用给封装起来. 2.CPU有四种不同的执行级别:0.1.2.3,数字越小,特权越高.Linux操作系统中采用了0 ...
- 为Redis设置登录密码并使用密码登录
https://www.cnblogs.com/756623607-zhang/p/6859540.html 密码登录Redis redis-cli -h 127.0.0.1 -p 6379 -a & ...
- Nginx的软件架构
nginx原理架构图 Nginx是 master/worker 模型 一个master进程,可生成一个或多个worker进程,每个worker进程基于事件驱动机制响应客户端请求: 事件驱动机制:epo ...
- trigger添加及表达式
创建触发器 点击Configuration(配置) → Hosts(主机) 点击hosts(主机)相关行的trigger 点击右上角的创建触发器(create trigger) name : 触发器名 ...
- ie浏览器css兼容样式实例
background-color:#f00;/*all*/background-color:#0ff\0;/* ie 8/9 */background-color:#0f0\9\0;/* ie9 */ ...
- Puppetnginx 架构图
Puppetnginx 架构图 优点 *性能:nginx因为精简,运行起来非常快速,许多人声称它的比pound更高效.*日志,调试:在这两个方面,nginx比pound更简洁.*灵活性:nginx的处 ...