jQuery on() 方法jQuery on() 方法jQuery on() 方法

jQuery on() 方法

一、总结

1、on方法作用：on() 方法在被选元素及子元素上添加一个或多个事件处理程序。就是用来给所选元素添加事件的。

2、off()方法和one()方法： 

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

3、on() 和 click() 的区别: 二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。

4、on()方法语法及实例（添加click事件）： $(selector).on(event,childSelector,data,function)

复制代码$(".li").on('click', ".deleteon", function(){ $(this).parent().remove(); })

1
2
3
$(".li").on('click', ".deleteon", function(){
    $(this).parent().remove(); 
})

 

 

二、jQuery on() 方法

jQuery on() 方法

 jQuery 事件方法

实例

向 <p> 元素添加 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() 方法移除事件处理程序。

---

 jQuery 事件方法

 

参考：

jQuery on() 方法 | 菜鸟教程
http://www.runoob.com/jquery/event-on.html

 

三、on() 和 click() 的区别:

二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。

以下实例中原先的 HTML 元素点击其身后的 Delete 按钮就会被删除。而动态添加的 HTML 元素，使用 click() 这种写法，点击 Delete 按钮无法删除；使用 On() 方式可以。

复制代码 1 $("#newclick").click(function(){ 2 $(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>'); 3 }); 4 $("#newon").click(function(){ 5 $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>'); 6 }); 7 $(".delete").click(function(){ 8 $(this).parent().remove(); 9 }); 10 11 $(".li").on('click', ".deleteon", function(){ 12 $(this).parent().remove(); 13 }) 14 $(".deleteclick").click(function(){ 15 $(this).parent().remove(); 16 });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#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(); 
});