$(document).on和$('.className').on区别

0.绑定对象,动态

$('document').on('click','.className',function() { });
是把事件绑定到document上,页面每次有点击就会去判断是否动作相符;

$('.className').on('click',function() { });
是把事件绑定到元素上;

$("className").on为onclick绑定,只有在页面onload的时候执行一次,当页面刷新后,
新加载的具有className的元素便没有事件绑定到上面了,

$(document).on这种方法会刷新和重新赋予绑定操作,所以一定程度上更为全面。

1. $(选择器).click(fn)

当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。

2.$(document).on('click','要选择的元素',function(){})

on方法包含很多事件,点击,双击等等事件。
和$().click()的用法一样,
最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。

举个栗子

fe05c16aca688b89a7f4a983788dff34.png

在下面的html中,两个父筛选器都是可以的,

<html>
   <div id="id_div_GenerateLink">
   	<button class="copy" type="button">复制</button>
   	<button class="copy" type="button">复制</button>
   </div>
</html>
//父筛选器.document
$(document).on('click', '.copy', function () {
	var that = $(this);
	console.log(that);
});

//父筛选器.#id_div_GenerateLink
$('#id_div_GenerateLink').on('click', '.copy', function () {
	var that = $(this);
	console.log(that);
});

扩展

JQuery中on()和click()区别

click()属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件。

on()属于动态加载,当页面加载完,可以为新增加的元素添加事件。但是必须选定负级元素。

摘抄文档

posted @ 2020-12-28 20:36  zh89233  阅读(623)  评论(0编辑  收藏  举报