很有必要说说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递归实现全排列

    全排列(permutation) 排列组合概念 排列,就是指从给定n个数的元素中取出指定m个数的元素,进行排序 组合,则是指从给定n个数的元素中仅仅取出指定m个数的元素,不考虑排序 全排列 以数字为例 ...

  2. Angular CLI: 全局脚本

    全局脚本 有的时候,我们需要加载全局脚本,例如 jQuery 脚本库,第三方的控件库等等.比如 jQuery 可以直接加载到 window 对象上,这就需要我们使用 Angular 中的全局脚本来处理 ...

  3. php 操作mysql

    //由于前期数据库字段设计问题,没太注意,字段内容,后台python采集数据直接插入,没做处理,数据又不想丢掉,只能对网站数据库字段内容进行处理,100万条数据,调试了半天,很多思路都试过,各种坑,弄 ...

  4. chmod 755 是李鬼(转)

    (1) 使用ls –l查看文件,前面显示的-rwxrwxr-x是什么意思? (2) chmod 755 xxx.sh又是什么意思? 1分钟简单说下,这两个和权限相关的问题. 先说下文件类型,访问方式, ...

  5. 【HDFS API编程】删除文件

    所有操作都是以fileSystem为入口进行,我们使用fileSystem下的delete方法进行删除文件操作,删除的时候必须慎重. 直接上代码: /** * 删除文件 * @throws Excep ...

  6. python3 摘抄

    https://www.python.org/downloads/release/python-370/ python3.7.0 win10环境,选:Windows x86-64可执行安装程序. ht ...

  7. 爬虫之requests

    一.基本用法 1.GET请求 ①r=requests.get(url) --返回Response对象 def get(url, params=None, **kwargs): params={... ...

  8. 逆变(contravariant)与协变(covariant):只能用在接口和委托上面

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. Druid中配置双数据库

    配置如下 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://w ...

  10. 结对项目-WordCount

    结对作业: 成员:201631062115(me),201631062613(partner) 代码地址:https://gitee.com/ackary/WordCount 作业的链接地址:http ...