What is the difference between on() and click() in jquery?-JS Tutorial-php.cn

What is the difference between on() and click() in jquery?

青灯夜游

Release： 2020-11-30 17:18:04

Original

1992 people have browsed it

Difference: 1. [click()] belongs to static loading. When the page is loaded, no click events will be added for newly added elements; 2. [on()] belongs to dynamic loading. When the page is loaded, , you can add events for newly added elements, but the parent element must be selected.

What is the difference between on() and click() in jquery?

Related recommendations: "jQuery Tutorial"

on() and click in jquery The difference between ()

##click() belongs to static loading. When the page is loaded, click events will no longer be added for newly added elements. .
on() belongs to dynamic loading. When the page is loaded, you can add events for the newly added elements, but the parent element must be selected.

There is no difference between the two when binding static controls, but if faced with dynamically generated controls, only on() can successfully bind to dynamic controls.

In the following example, the original HTML element will be deleted by clicking the Delete button behind it. For dynamically added HTML elements, using the click() method, you cannot delete them by clicking the Delete button; you can use the On() method.

<!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>

Copy after login

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of What is the difference between on() and click() in jquery?. For more information, please follow other related articles on the PHP Chinese website!