jQuery里的on()方法

72 阅读 0 评论 48 点赞

我是靠谱客的博主过时冰淇淋，最近开发中收集的这篇文章主要介绍jQuery里的on()方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

定义：
on()函数用于为指定元素的一个或多个事件绑定事件处理函数。
语法：
$(selector).on(event,childSelector,data,function)

$('body').on('click', 'ul>li', function()

参数	描述
event	String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、“focus click”、“keydown.myPlugin”。
selector	可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
data	可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
function	Function类型指定的事件处理函数。

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

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

<script src="htt[添加链接描述](https://c.runoob.com/codedemo/5357)ps://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<h1>展示jQuery中on()和click()的区别</h1>

<p>
	<span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。</span>
</p>
<div class="test">
	<button class="new" id="newon">NewOn</button> 
	<button class="new" id="newclick">NewClick</button>
	<ul class="li"> 
		<li>原先的HTML元素on<button class="deleteon">Delete</button></li> 
		<li>原先的HTML元素click<button class="deleteclick">Delete</button></li> 
	</ul> 
</div>

javascript代码：

$("#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>'); 
}); 

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