Comment lier des événements à des balises générées dynamiquement dans jquery-js tutoriel-php.cn

Comment lier des événements à des balises générées dynamiquement dans jquery

php中世界最好的语言

Libérer： 2018-03-14 16:31:50

original

1756 Les gens l'ont consulté

Cette fois, je vais vous présenter jquerycomment lier des événements à des balises générées dynamiquement, et des notes sur la façon dont jquery lie les événements aux balises générées dynamiquement. ils ? Voici des cas réels.

Je rencontre souvent la difficulté de lier des événements à des balises générées dynamiquement. Je l'ai brièvement testé et résumé, et la conclusion est la suivante :

	<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<p id="d2">
			生成a标签
		</p>
		<p id="d3">
			<input type="button" value="生成a标签" id="btn" />
		</p>
	</body>
	<script>		
		$(function(){
			$('#btn').bind('click', function(event) {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2");
 			});
 			
 			///bind方法对于动态添加的标签不好使，只对已经存在的静态标签好用
 			$('li').bind('click', function(event) {
			 alert("haha"); ///根本不会触发这个方法
 			});
		})
	</script>

Copier après la connexion

Cliquez sur le bouton et il sera ajouté. en d2 Une balise li, cela fonctionne.

Cependant, si vous utilisez la méthode bind pour lier la balise li qui sera générée dynamiquement à l'avenir lors de l'initialisation, elle sera invalide. Cliquer sur la balise li générée ne provoquera aucune réaction.

Étant donné que la méthode bind ne peut lier des événements qu'à l'objet jq de balise statique qui existe déjà lors de son exécution, elle n'est pas valide pour les futures balises ajoutées dynamiquement.

À l'heure actuelle, il existe plusieurs façons de résoudre ce problème :

Méthode 1 :

<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<p id="d2">
			动态生成a标签
		</p>
		<p id="d3">
			<input type="button" value="生成a标签" id="btn"/>
			
		</p>
	</body>
	<script>
		$(function() {
			///点击按钮，给d2动态添加标签
			$('#btn').bind('click', function() {
				/* 在添加标签的同时给添加的标签绑定点击事件 */
				$("<li onclick=&#39;show()&#39;>Hello</li>").appendTo("#d2");
			});
	
		})
	
		function show() {
			alert($(this).text());///这样打印出的是空的，没有任何东西，但是方法是会触发的（不能这样打印自己）
			alert("哈哈");
		}
	</script>

Copier après la connexion

Ceci La première méthode consiste à épisser les événements js natifs à déclencher lors de l'épissage dynamique, puis à définir la méthode d'événement dans la balise de script. Cette méthode peut déclencher l'événement click de li. Mais si vous souhaitez utiliser alert($(this).text()), qui imprime les propres informations de l'étiquette, aucun résultat ne sera affiché. Même si l'étiquette est imprimée de manière statique, elle ne sera pas affichée.

Pour résoudre ce problème, vous pouvez utiliser les deux méthodes suivantes.

Méthode 2 :

	<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<p id="d2">
			生成a标签
		</p>		
		<p id="d3">
			<input type="button" value="生成a标签" id="btn"/>
		</p>
	</body>
	<script>
		$(function(){
			$('#btn').bind('click', function(event) {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2").bind('click', function() {
			  /* 显示标签的内容 */
			  alert($(this).text()); ///这种方式也可以正常打印出 hello
			 });
 			}); 			
		})
	</script>

Copier après la connexion

Cette méthode peut résoudre le problème ci-dessus. Bien qu'il utilise également la méthode bind, veuillez noter qu'il dispose d'abord de l'objet tag cible, puis appelle la méthode bind, il est donc facile à utiliser. Et il peut en fait imprimer normalement ses propres informations, ce qui est étonnant.

Méthode 3 :

<body>
		<!-- 下面是用纯动态方式生成标签 -->
		<p id="d1">
			测试静态标签的绑定方法
		</p>
		<br />		
		<p id="d2">
			动态生成a标签的位置
		</p>
		<p id="d3">
			<input type="button" value="生成a标签" id="btn" />
		</p>
	</body>
	<script>
		$(function(){
			$('#btn').bind('click', function() {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2");
 			});			
 			///bind方法对于动态添加的标签不好使，只对已经存在的静态标签好用
 			///用live方法才好用
 			$('li').live('click', function() {
			 alert($(this).text());///注意，用live还可以这样写，结果是正常的
			 alert("haha");
 			}); 			
 			///通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）
 			$('#d1').live('click', function() {///对于静态和动态创建的标签都好使
			 alert($(this).text());///注意，用live还可以这样写，结果是正常的.这是非常重要的
			 alert("haha");
 			});
		})
	</script>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Comment jQuery peut créer un effet d'animation qui rebondit lorsqu'il touche le bord du cadre

isPlainObject de jQuery Comment utiliser la méthode ()

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!