jquery中on()与click()的区别是什么？

互联网 20-11-19

区别：1、【click()】属于静态加载，当页面加载完，就不在为新增加的元素添加点击事件；2、【on()】属于动态加载，当页面加载完，可以为新增加的元素添加事件，但是必须选定父级元素。

相关推荐：《jQuery教程》

jquery中on()与click()的区别

click()属于静态加载，当页面加载完，就不在为新增加的元素添加点击事件。
on()属于动态加载，当页面加载完，可以为新增加的元素添加事件，但是必须选定父级元素。

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

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

<!DOCTYPE html> <html> 	<head> 		<meta charset="UTF-8"> 		<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> 	</head>  	<body>	 		<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> 	</body> 		<script type="text/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>');  			}); 			$(".delete").click(function(){  				$(this).parent().remove();  			});  			 			$(".li").on('click', ".deleteon", function(){ 				$(this).parent().remove();  			}) 			$(".deleteclick").click(function(){  				$(this).parent().remove();  			}); 		</script> </html>

更多编程相关知识，请访问：编程教学！！

以上就是jquery中on()与click()的区别是什么？的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： click()