首页 > 文章 > web前端 > jquery中on()与click()的区别是什么？

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

青灯夜游原创: 2020-11-19 09:58:571835浏览

区别：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(&#39;<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>&#39;); 
			});
			$("#newon").click(function(){ 
				$(".li").append(&#39;<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>&#39;); 
			});
			$(".delete").click(function(){ 
				$(this).parent().remove(); 
			}); 
			
			$(".li").on(&#39;click&#39;, ".deleteon", function(){
				$(this).parent().remove(); 
			})
			$(".deleteclick").click(function(){ 
				$(this).parent().remove(); 
			});
		</script>
</html>

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

以上是jquery中on()与click()的区别是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！

jquery html delete 事件

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：jquery和React的区别是什么？下一篇：jquery有克隆方法吗？

查看更多