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方法给元素绑定事件的更多相关文章

  1. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  2. jQuery中对未来的元素绑定事件

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  3. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  4. jQuery中对未来的元素绑定事件用bind、live or on

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  5. jQuery给动态添加的元素绑定事件的方法

    我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv">   <ul></ul> </d ...

  6. jQuery对 动态添加 的元素 绑定事件(on()的用法)

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  7. jquery给动态生成的元素绑定事件,on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

  8. jquery append 动态添加的元素绑定事件on

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  9. jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...

随机推荐

  1. java实现spark常用算子之intersection

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  2. SuperMap-WMTS服务修改切片集顺序

    1.访问iserver的服务接口,找到WMTS服务接口 2.选择切片集的默认顺序

  3. Centos7下安装ZooKeeper

    1.下载源码 zookeeper 需要jdk的支持,需要先安装jdk 官网下载地址: http://mirrors.hust.edu.cn/apache/zookeeper/ 选择最新的版本进行下载 ...

  4. 3.1.2-arm-linux-ld选项

    有文件link.S,内容如下 .text .global _start _start: b step1 step1: ldr pc, =step2 step2: b step2 经过如下命令编译 ar ...

  5. (持续更新中~~~)kafka--消息引擎与分布式流处理平台

    kafka概述 kafka是一个分布式的基于发布/订阅模式的消息队列(message queue),一般更愿意称kafka是一款开源的消息引擎系统,只不过消息队列会耳熟一些.kafka主要应用于大数据 ...

  6. 5.flask与数据库

    1.安装postgresql 注意:在flask中,操作数据库还是通过orm调用驱动来操作.sqlalchemy是python下的一款工业级的orm,比Django自带的orm要强大很多,至于什么类型 ...

  7. kubesphere集群搭建(多节点)

    kubesphere官网:https://kubesphere.io/docs/advanced-v2.0/zh-CN/introduction/intro/ 一.准备环境 1.准备服务器 maste ...

  8. .htaccess防盗链方法(文件、图片)

    http标准协议中有专门的字段记录referer,一来可以追溯上一个入站地址是什么,二来对于资源文件,可以跟踪到包含显示他的网页地址是什么. 因此所有防盗链方法都是基于这个Referer字段两种方法: ...

  9. jquery判断cookie是否存在

    首先请加载jquery库与jquery cookie插件 http://code.jquery.com/jquery-latest.js http://files.cnblogs.com/afish/ ...

  10. ie浏览器css兼容样式实例

    background-color:#f00;/*all*/background-color:#0ff\0;/* ie 8/9 */background-color:#0f0\9\0;/* ie9 */ ...