菜鸟教程 -- 学的不仅是技术，更是梦想！

jQuery 教程

jQuery off() 方法

jQuery one() 方法

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() 相同的效果。

delegate() 改为 on()
如何使用 on() 来达到与 delegate() 相同的效果。

live() 改为 on()
如何使用 on() 来达到与 live() 相同的效果。

添加多个事件处理程序
如何向元素添加多个事件处理程序。

使用 map 参数添加多个事件处理程序
如何使用 map 参数向被选元素添加多个事件处理程序。

在元素上添加自定义事件
如何在元素上添加自定义命名空间事件。

向函数传递数据
如何向函数传递数据。

向未来的元素添加事件处理程序
演示 on() 方法也适用于尚未创建的元素。

移除事件处理程序
如何使用 off() 方法移除事件处理程序。

jQuery 事件方法

jQuery off() 方法

jQuery one() 方法

1 篇笔记写笔记

#0

100

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(); 
});

尝试一下 »

pharma6年前 (2018-04-26)