jQuery on() 方法
jQuery 事件方法实例
向
元素添加 click 事件处理程序：
$(document).ready(function(){$("p").on("click",function(){alert("段落被点击了。");});});
尝试一下 »
定义和用法
on() 方法在被选元素及子元素上添加个或多个事件处理程序。
自 jQuery 版本 1.7 起 on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利 推荐使用该方法 它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（如由脚本创建的新元素）。
提示：如需移除事件处理程序 请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除 请使用 one() 方法。
语法
$(selector).on(event,childSelector,data,function)
| 参数 | 描述 |
|---|---|
| event | 必需。规定要从被选元素移除的个或多个事件或命名空间。 由空格分隔多个事件值 也可以是数组。必须是有效的事件。 |
| childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身 如已废弃的 delegate() 方法）。 |
| data | 可选。规定传递到函数的额外数据。 |
| function | 可选。规定当事件发生时运行的函数。 |
更多实例
从 bind() 改为 on()
如何使用 on() 来达到与 bind() 相同的效果。
Changing from delegate() to on()
如何使用 on() 来达到与 delegate() 相同的效果。
从 live() 改为 on()
如何使用 on() 来达到与 live() 相同的效果。
添加多个事件处理程序
如何向元素添加多个事件处理程序。
使用 map 参数添加多个事件处理程序
如何使用 map 参数向被选元素添加多个事件处理程序。
在元素上添加自定义事件
如何在元素上添加自定义命名空间事件。
向函数传递数据
如何向函数传递数据。
向未来的元素添加事件处理程序
演示 on() 方法也适用于尚未创建的元素。
移除事件处理程序
如何使用 off() 方法移除事件处理程序。
文人墨客
on() 和 click() 的区别:
二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。
以下实例中原先的 HTML 元素点击其身后的 Delete 按钮就会被删除。而动态添加的 HTML 元素，使用 click() 这种写法，点击 Delete 按钮无法删除；使用 On() 方式可以。
$("#newclick").click(function(){$(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>'); }); $("#newon").click(function(){ $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>'); }); $(".delete").click(function(){ $(this).parent().remove(); }); $(".li").on('click', ".deleteon", function(){ $(this).parent().remove(); }); $(".deleteclick").click(function(){ $(this).parent().remove(); });