很有必要说说jQuery的on方法，这个方法存在大乾坤大奥秘，主要注意两点：

1、为已存在元素和未来元素（动态添加元素）绑定处理函数。

2、自定义一个非标准的事件并绑定处理函数。

定义和用法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

实例1：在元素上添加自定义事件 ，就是绑定一个自定义事件

<!DOCTYPE html>

<html>

<head>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("p").on("myOwnEvent", function(event, showName){

    $(this).text(showName + "! What a beautiful name!").show();

  });

  $("button").click(function(){

    $("p").trigger("myOwnEvent",["Anja"]);

  });

});

</script>

</head>

<body>

<button>Trigger custom event</button>

<p>Click the button to attach a customized event on this p element.</p>

</body>

</html>

测试运行，请点击这里

实例2：向未来的元素添加事件处理程序，绑定处理方法时，元素还不存在

<!DOCTYPE html>

<html>

<head>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("div").on("click","p",function(){

    $(this).slideToggle();

  });

  $("button").click(function(){

    $("<p>This is a new paragraph.</p>").insertAfter("button");

  });

});

</script>

</head>

<body>

<div style="background-color:yellow">

<p>This is a paragraph.</p>

<p>Click any p element to make it disappear. Including this one.</p>

<button>Insert a new p element after this button</button>

</div>

</body>

</html>

on() 和 click() 的区别:

二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。

以下实例中原先的 HTML 元素点击其身后的 Delete 按钮就会被删除。而动态添加的 HTML 元素，使用 click() 这种写法，点击 Delete 按钮无法删除；使用 On() 方式可以。

更多实例

从 bind() 改为 on()
如何使用 on() 来达到与 bind() 相同的效果。

Changing from delegate() to on()
如何使用 on() 来达到与 delegate() 相同的效果。

从 live() 改为 on()
如何使用 on() 来达到与 live() 相同的效果。

添加多个事件处理程序
如何向元素添加多个事件处理程序。

使用 map 参数添加多个事件处理程序
如何使用 map 参数向被选元素添加多个事件处理程序。

在元素上添加自定义事件
如何在元素上添加自定义命名空间事件。

向函数传递数据
如何向函数传递数据。

向未来的元素添加事件处理程序
演示 on() 方法也适用于尚未创建的元素。

移除事件处理程序
如何使用 off() 方法移除事件处理程序。

参考原文：http://www.runoob.com/jquery/event-on.html

jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件的更多相关文章

  1. jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  2. js原生创建模拟事件和自定义事件的方法

    让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 模拟鼠标事件MDN上已经说得很清楚,尽管为了保 ...

  3. jQuery事件之自定义事件

    其实事件的bind和unbind,都是为了自定义事件做准备. 语法: $(selector).trigger(type, data); 作用:在每一个匹配的元素上触发某类事件,它触发的是由bind() ...

  4. jquery mouseenter()方法 语法

    jquery mouseenter()方法 语法 作用:当鼠标指针穿过元素时,会发生 mouseenter 事件.该事件大多数时候会与 mouseleave 事件一起使用.mouseenter() 方 ...

  5. jquery resize()方法 语法

    jquery resize()方法 语法 作用:当调整浏览器窗口的大小时,发生 resize 事件.resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数.大理石 ...

  6. 解密jQuery事件核心 - 自定义设计（三）

    接上文http://www.cnblogs.com/aaronjs/p/3447483.html 本文重点:自定义事件 “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率 ...

  7. jQuery 自定义事件的学习笔记

    jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件  代码如下 复制代码 ...

  8. jquery移除事件，绑定事件，触发事件

    $('.gcddfadf-btn-pay').unbind('click');//移除绑定事件 $('.gcddfadf-btn-pay').bind('click',function(){});// ...

  9. JS数组 选定元素slice() slice() 方法可从已有的数组中返回选定的元素。 语法 arrayObject.slice(start,end)

    选定元素slice() slice() 方法可从已有的数组中返回选定的元素. 语法 arrayObject.slice(start,end) 参数说明: 1.返回一个新的数组,包含从 start 到 ...

随机推荐

  1. Java异常处理——受控（checked）的异常（throws语句）

    受控与不受控的异常 1.throws语句中声明的异常称为受控(checked)的异常,通常直接派生自Exception类. 2.RuntimeException(其基类为Exception) 和Err ...

  2. SVN忽略已提交的文件（ignore，移出版本控制）

    本文适用于已安装TortoiseSVN客户端的同学. 1.右键点击要忽略的文件夹或文件,鼠标移到“TortoiseSVN”,找到“Unversion and add to ignore list”,选 ...

  3. Spring boot 自定义拦截器

    1.新建一个类实现HandlerInterceptor接口,重写接口的方法 package com.zpark.interceptor; import com.zpark.tools.Constant ...

  4. 如何清除保存在IE浏览器上的账号密码

    1,打开浏览器,打开右上角的工具选项,选择Internet选项 2,在‘常规’选项卡中点击“删除”按钮,在弹框中勾选“密码”,选择删除即可.

  5. python_14 静态属性、类方法、静态方法；组合；继承

    静态属性 在类中函数前加@property,在实例调用函数时无需加(),将函数属性封装,调用时看起来与数据属性类似 将函数封装成数据属性的形式,外部调用时看不到逻辑,静态属性可以访问实例属性也可以访问 ...

  6. Linux su命令

    本人以前一直习惯直接使用root,很少使用su,前几天才发现su与su -命令是有着本质区别的! 大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行, ...

  7. 深入理解Java虚拟机之JVM垃圾回收随笔

    1.对象已经死亡? 1.1引用计数法:给对象中添加一个引用计数器,每当有一个地方引用他时,计数器值就加1:当引用失效时,计数器值就减1:任何时刻计数器都为0的对象就是不可能再被使用 的.但是它很难解决 ...

  8. a 标签实现分享功能

    在网页中,经常会用到分享功能,例如分享到qq,分享到微信,分享到微博等,但是怎么实现呢?一直没有想清楚这个问题,觉得好高大上的样子,于是在网上找了一些资料,也没有看出个什么所以然来: 于是有些心急了, ...

  9. 用VS2015编译pjsip的工程pjproject-vs14

    先去官网下载最新的源码包,我用的版本是2.7.1 . 将源代码解压后,在路径:pjproject-3.7.1\pjlib\include\pj 中创建新文件config_site.h,内容如下: #i ...

  10. [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(二) -- 安装jira 7.5.4

    [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(二) -- 安装jira 7.5.4 环境都配置好以后, 开始搭建Jira的环境, 这里参考了一篇文 ...