$().click()和$().on('click','要选择的元素'，function(){})的区别

最新推荐文章于 2022-06-24 16:56:47 发布

原创最新推荐文章于 2022-06-24 16:56:47 发布 · 8.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

每天总结专栏收录该内容

10 篇文章

订阅专栏

本文深入解析jQuery中的事件委托机制，对比$(选择器).click与$(document).on的区别，重点讲解如何利用on方法为动态创建的元素添加事件监听，通过实例演示实现过程。

部署运行你感兴趣的模型镜像

$(选择器).click(function(){})：页面中已经存在的DOM。

$(ducument).on(‘click’,‘要选择的元素’,function(){})：动态创建的元素也能触发事件，
且ducument在页面已经存在，而不是动态添加的。

on方法包含很多事件，点击，双击等等事件。

下面举例子说明：

//CSS可忽略
<!doctype html>
<html>
<head>
	<style>
	ul{
		list-style: none;
		display: flex;	
	}
	ul li{
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: pink;
		font-weight: bold;
		border: 1px solid #eee;
	}
	ul li:hover{
		cursor: pointer;
	}
</style>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>
	<div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</body>
<script>
	/* 
	 $('li').click(function(){
	   	  alert($(this).text())
	 })
	 $('ul').append('<li>6</li>')
    */
	 
	//上面这段js运行后，第6个li添加了进去，但是没有click点击事件
	
	//----------- 分割线 --------------
	//ul是已经存在的
	$('ul').on('click','li',function(){//这里改为用on()方法，第6个li也有了点击事件
		alert($(this).text())		  
	})
	$('ul').append('<li>6</li>')
</script>
</body>
</html>