Was ist der Unterschied zwischen on() und click() in jquery?-js-Tutorial-php.cn

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

青灯夜游

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

Original

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