Quelle est la différence entre on() et click() dans jquery ?-js tutoriel-php.cn

Quelle est la différence entre on() et click() dans jquery ?

青灯夜游

Libérer： 2020-11-30 17:18:04

original

2002 Les gens l'ont consulté

Différences : 1. [click()] appartient au chargement statique Lorsque la page est chargée, les événements de clic ne seront plus ajoutés pour les éléments nouvellement ajoutés ; 2. [on()] appartient au chargement dynamique. Lorsque la page est chargée, vous pouvez ajouter des événements pour les éléments nouvellement ajoutés, mais l'élément parent doit être sélectionné.

Quelle est la différence entre on() et click() dans jquery ?

Recommandations associées : "Tutoriel jQuery"

on() et cliquez dans jquery La différence entre ()

click() est le chargement statique Lorsque la page est chargée, aucun événement de clic n'est ajouté pour les éléments nouvellement ajoutés.
on() appartient au chargement dynamique Lorsque la page est chargée, vous pouvez ajouter des événements pour les éléments nouvellement ajoutés, mais l'élément parent doit être sélectionné.

Il n'y a aucune différence entre les deux lors de la liaison de contrôles statiques, mais face à des contrôles générés dynamiquement, seul on() peut être lié avec succès aux contrôles dynamiques.

Dans l'exemple suivant, l'élément HTML d'origine sera supprimé en cliquant sur le bouton Supprimer situé derrière lui. Pour les éléments HTML ajoutés dynamiquement, à l'aide de la méthode click(), vous ne pouvez pas les supprimer en cliquant sur le bouton Supprimer, vous pouvez utiliser la méthode 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>

Copier après la connexion

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!