Heim > Web-Frontend > js-Tutorial > Was ist der Unterschied zwischen on() und click() in jquery?

Was ist der Unterschied zwischen on() und click() in jquery?

青灯夜游
Freigeben: 2020-11-30 17:18:04
Original
1973 Leute haben es durchsucht

Unterschiede: 1. [click()] gehört zum statischen Laden. Beim Laden der Seite werden keine Klickereignisse mehr hinzugefügt. 2. [on()] gehört zum dynamischen Laden geladen, können Sie Klickereignisse für neue Elemente hinzufügen. Hinzugefügte Elemente fügen Ereignisse hinzu, aber das übergeordnete Element muss ausgewählt sein.

Was ist der Unterschied zwischen on() und click() in jquery?

Verwandte Empfehlungen: „jQuery Tutorial

Der Unterschied zwischen on() und click() in jquery

  • click() gehört zu statisch Beim Laden der Seite werden keine Klickereignisse mehr für neu hinzugefügte Elemente hinzugefügt. click()属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件。

  • on()

on() gehört zum dynamischen Laden. Wenn die Seite geladen wird, können Sie Ereignisse für die neu hinzugefügten Elemente hinzufügen, aber das übergeordnete Element muss ausgewählt sein.

Beim Binden statischer Steuerelemente gibt es keinen Unterschied zwischen den beiden. Bei dynamisch generierten Steuerelementen kann jedoch nur on() erfolgreich an dynamische Steuerelemente gebunden werden.

Im folgenden Beispiel wird das ursprüngliche HTML-Element gelöscht, indem Sie auf die Schaltfläche „Löschen“ dahinter klicken. Dynamisch hinzugefügte HTML-Elemente können Sie mit der Methode click() nicht löschen, indem Sie auf die Schaltfläche „Löschen“ klicken. Sie können die Methode On() verwenden.

<!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>
Nach dem Login kopieren

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen on() und click() in jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage