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. JS基础_标识符

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. day3-3种实现小图标与文字水平对齐的方式

    效果图: 1.使用小图标作为背景图实现 html: <div class="test"> <ul> <li class="method1&q ...

  3. python 利用已有Ner模型进行数据清洗合并

    # -*- coding: utf-8 -*- from kashgari.corpus import DataReader import re from tqdm import tqdm def c ...

  4. Nginx请求限制配置

    Nginx请求限制配置 请求限制可以通过两种方式来配置,分别是  连接频率限制和请求频率限制 首先我们要知道什么是http请求和连接,浏览器和服务端首先通过三次握手完成连接,然后发起请求,传输请求参数 ...

  5. 颜色框架Hue使用方法

    Hue地址 如果有疑问或者想探讨iOS开发相关的技术,十分欢迎. 1. cocoapods安装Hue pod "Hue" 2. 导入框架 import Hue 3. 将十六进制数字 ...

  6. shelve:极其强大的序列化模块

    介绍 数据持久化,就是把数据从内存刷到磁盘上.但是要保证在读取的时候还能恢复到原来的状态.像pickle和json之类的持久化模块基本上无需介绍了,这里介绍两个其他很少用但是功能很强大的模块. dbm ...

  7. MSSQL日期分组排序

    等于今天日期的排上面,大于今天的排中间,小于今天的排下面,带分页.

  8. php socket如何实现长连接

    长连接是什么? 朋友们应该都见过很多在线聊天工具和网页在线聊天的工具.学校内有一种熟悉的功能,如果有人回复你了,网站会马上出现提示,此时你并没有刷新页面:Gmail也有此功能,如果邮箱里收到了新的邮件 ...

  9. python时间 time模块和datetime模块

    一.time模块 time模块中时间表现的格式主要有三种: a.timestamp时间戳,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量 b.struct_time时间元组,共 ...

  10. Python CGI编程Ⅶ

    简单的表单实例:GET方法 以下是一个通过HTML的表单使用GET方法向服务器发送两个数据,提交的服务器脚本同样是hello_get.py文件,hello_get.html 代码如下: 默认情况下 c ...