Liaison d'événements à des balises générées dynamiquement dans jquery (tutoriel détaillé)-js tutoriel-php.cn

Liaison d'événements à des balises générées dynamiquement dans jquery (tutoriel détaillé)

亚连

Libérer： 2018-06-04 17:29:59

original

2527 Les gens l'ont consulté

Ci-dessous, je partagerai avec vous un résumé de plusieurs méthodes de liaison d'événements à des balises générées dynamiquement à l'aide de jquery. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

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é moi-même, 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(){
			$(&#39;#btn&#39;).bind(&#39;click&#39;, function(event) {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2");
 			});
 			
 			///bind方法对于动态添加的标签不好使，只对已经存在的静态标签好用
 			$(&#39;li&#39;).bind(&#39;click&#39;, function(event) {
			 alert("haha"); ///根本不会触发这个方法
 			});
		})
	</script>

Copier après la connexion

<. 🎜>

Cliquez sur le bouton et une balise li sera ajoutée à d2. C'est OK.

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动态添加标签
			$(&#39;#btn&#39;).bind(&#39;click&#39;, function() {
				/* 在添加标签的同时给添加的标签绑定点击事件 */
				$("<li onclick=&#39;show()&#39;>Hello</li>").appendTo("#d2");
			});
	
		})
	
		function show() {
			alert($(this).text());///这样打印出的是空的，没有任何东西，但是方法是会触发的（不能这样打印自己）
			alert("哈哈");
		}
	</script>

Copier après la connexion

Cette méthode consiste à épisser les événements natifs js à 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(){
			$(&#39;#btn&#39;).bind(&#39;click&#39;, function(event) {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2").bind(&#39;click&#39;, function() {
			  /* 显示标签的内容 */
			  alert($(this).text()); ///这种方式也可以正常打印出 hello
			 });
 			});
 			
		})
	</script>

Copier après la connexion

Cette méthode peut résoudre le problème ci-dessus de . 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(){
			$(&#39;#btn&#39;).bind(&#39;click&#39;, function() {
			 /* 在添加标签的同时给添加的标签绑定点击事件 */
			 $("<li>Hello</li>").appendTo("#d2");
 			});
 			
 			///bind方法对于动态添加的标签不好使，只对已经存在的静态标签好用
 			///用live方法才好用
 			$(&#39;li&#39;).live(&#39;click&#39;, function() {
			 alert($(this).text());///注意，用live还可以这样写，结果是正常的
			 alert("haha");
 			});
 			
 			///通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）
 			$(&#39;#d1&#39;).live(&#39;click&#39;, function() {///对于静态和动态创建的标签都好使
			 alert($(this).text());///注意，用live还可以这样写，结果是正常的.这是非常重要的
			 alert("haha");
 			});
		})
	</script>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous . J’espère que cela sera utile à tout le monde à l’avenir.

Articles associés :

Comment utiliser le composant de boîte d'invite globale dans vue ?

Comment utiliser la recherche frontale dans vue2 ?

Comment transmettre la valeur du composant enfant au composant parent dans vue

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!