很有必要说说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. Hexo:创建属于你自己的博客

    step: 1.install node.js,git,github 2.npm install -g hexo-cli 3.mkdir hexo 4.cd hexo mkdir blog 5.cd ...

  2. leetCode83. 删除排序链表中的重复元素

    给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示例 2: 输入: 1->1->2->3-&g ...

  3. 【机器学习_8】pandas

    背景 关于同一个话题,不同作者也有不同行文结构.但要真正理解并会用,在我的经验里,是必须要自己重新组织的. 本文是基于以往看过的资料,从自身数据处理应用的角度出发,重新组织pandas应用结构,希望能 ...

  4. LINUX新建和增加SWAP分区

    我们都知道在安装Linux系统时在分区时可以分配swap分区,而系统安装后(在运行中)如何建立或调整swap分区呢? 在装完Linux系统之后,建立Swap分区有两种方法. 1.新建磁盘分区作为swa ...

  5. 分组密码算法AES-128,192,256 C语言实现第一版

    AES的C语言实现入门版 AES分组密码算法中明文分组位128bits,密钥分组可以为128,192,256bits.AES也是由最基本的变换单位——“轮”多次迭代而成的.我们将 AES 中的轮变换计 ...

  6. 模拟登录，发送amf类型数据

    参考 http://blog.csdn.net/amandag/article/details/5666219 以及 稍微修改了一下AMFPost的类     一.登录 登录过程中主要用到标红的3个请 ...

  7. Python第8天

    zip() 拉链方法 max(字典) 默认比较字典的key,不同类型的数据不能比较,只要可以被for迭代即可 利用zip与max(字典)共同使用 ord() — chr()    ascii码表数字与 ...

  8. sqlserver 存储过程返回游标的处理

    创建表: create table tb1( id int , name ) ) ------------------------------------------------- 创建返回游标的存储 ...

  9. springboot + schedule

    参考文章:https://blog.csdn.net/sinianliushui/article/details/78841713 参考文章: https://blog.csdn.net/hao703 ...

  10. ToroiseSVN和VisualSVN-server的配置使用, 外网访问SVN 版本库

    https://www.cnblogs.com/Leo_wl/p/3475167.html