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. Spring的基本应用(1):依赖以及控制反转

    在说到这里的时候,首先要说下程序的耦合和解耦,以便对上节做一个解释. 一.程序的耦合和解耦 1.程序的耦合性(Copling) (1)程序的耦合性,也叫做耦合度,是对模块之间关联程度的度量,耦合性的强 ...

  2. css--内凹圆角

    <div class="box"></div> :root { --r: 2em; } .box { overflow: hidden; position: ...

  3. Visual Studio 2010中的js注释

    Visual Studio 2010中的js注释已经很强大了,但怎么才能和调用c#的方法一样容易呢?怎样才能让每个参数都有注释说明呢?底下就是想要的答案. 先上图,如图所示: 其中红色的办法为注释效果 ...

  4. docker删除虚悬镜像(临时镜像文件)

    在我们构建镜像的过程中,常常需要使用build命令根据Dockerfile进行构建镜像,并且会build很多次,镜像名字也是相同的,那么就会出来下面这种情况

  5. nginx_rtmp

    rtmp { server { listen ; chunk_size ; max_connections ; #音视频流上传和播放地址都是 rtmp://你的IP/live/streamName # ...

  6. Linux系统文件系统及文件基础篇

    学习Linux,重难点在于掌握不同类别的文件系统及其作用.通过对Linux系统的安装,我们首先来了解下Linux系统里各个目录文件夹下的大致功能:主要的目录树的有/./root./home./usr. ...

  7. Systemctl和service、chkconfig命令的关系

      systemctl命令:是一个systemd工具,主要负责控制systemd系统和服务管理器. service命令:可以启动.停止.重新启动和关闭系统服务,还可以显示所有系统服务的当前状态. ch ...

  8. jaxb解析xml工具类

    [quote]jaxb jdk 自带的解析xml的一种方式支持,只需要用注解对javabean进行数据绑定[/quote] package com.nnk.flowrecharge.common;im ...

  9. 读《JavaScript面向对象编程指南》(二)

    第五章 原型 在JavaScript中,所有函数都会拥有一个 prototype 的属性,默认初始值为空对象. 可以在相关的原型对象中添加新的方法和属性,甚至可以用自定义对象来完全替换掉原有的原型对象 ...

  10. BZOJ1791 基环树直径

    非递归版4S /************************************************************** Problem: 1791 User: 18357 Lan ...