很有必要说说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() 方法移除事件处理程序。