Home > Article > Web Front-end > What is the difference between on() and click() in jquery?

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

青灯夜游Original: 2020-11-19 09:58:571966browse

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.

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>

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!

jquery html delete 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the difference between jquery and React?Next article：What is the difference between jquery and React?

See more

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

Related articles