jQuery里的on()方法

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

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

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

link.代码测试
link:aaa
返回值
on()函数的返回值为jQuery类型,返回当前jQuery对象本身

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值