很有必要说说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. 团队第六次 # scrum meeting

    github 本此会议项目由PM召开,召开时间为4-10日晚上9点 召开时长20分钟 任务表格 袁勤 负责协调前后端 https://github.com/buaa-2016/phyweb/issue ...

  2. flask+redis实现抢购（秒杀）功能

    今天面试了 一家非常高大上的公司,问了我关于redis的实用性问题,但是答的不是很好,所以下午通过再次学习 redis,实现相关实用性功能的一种. 对于抢购功能,难点在于 抢购时 由于高并发请求,导致 ...

  3. AET PN结

    电场方向 电场方向和正电荷受力方向相同 飘移运动和扩散运动 多子和电场方向互相抵制,而多子是扩散运动,而对少子则是促进作用,当扩散和漂移达到动态平衡时,我们称PN结形成 PN结特性 单项导电性

  4. <iframe width="250" height="250" src="http://www.baidu.com"></iframe>

     <iframe width="250" height="250" src="http://www.baidu.com">< ...

  5. MVC的开发模式简单介绍

    MVCM model 模型 实体类和业务和dao dao(数据库访问对象)V view 视图 jspC controller 控制器 servlet 作用:视图和逻辑分离 开发设计顺序 1.设计数据库 ...

  6. WebView内容自适应

    webview页面自适应 //适应内容大小 start webSetting.setUseWideViewPort(true); webSetting.setLayoutAlgorithm(WebSe ...

  7. IntelliJ IDEA插件系列

    参考: IntelliJ IDEA插件系列 1. activate-power-mode 和 Power mode II 根据Atom的插件activate-power-mode的效果移植到IDEA上 ...

  8. Jmeter学习记录

    JSON正则表达式提取规则 https://www.cnblogs.com/hc1020/p/7723720.html Jmeter非GUI下执行日志 执行命令 ./jmeter  -n  -t  $ ...

  9. 如何自学Java开发

    对于这个话题,已经不止N次在线上或线下听到了.从这个话题被太多的人提问及回答,我们可以肯定地说,Java这个已经有近15年头的计算机编程语言是有着及其广阔的应用领域和独特而短期无法替代的优势.我们姑且 ...

  10. MSSQL 表修复语句

    一早发现C盘爆满了,查询了下发现是mssql下面占用了几十G的log以及mdmp文件 一般发现这种文件就是代表着数据库出问题了. 检查数据库,发现某个数据库有问题,(回想起来前天做了一个操作,可能有问 ...