简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

jquery append 动态添加的元素事件on 不起作用的解决方案_jquery

WBOY
Libérer： 2016-05-16 15:48:09
original
1272 Les gens l'ont consulté

用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？on方法中要先找到原选择器（如例.info),再找到动态添加的选择器（如列.delete)。

具体不多说了，请看下面的代码吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<script type="text/javascript"
src="../resources/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
//动态添加
$(".add").on("click",function(){
console.log("进来了");
$(".info").append('<div class="delete"><h3>单击我来删除我</h3></div>');
});
 //对动态添加的元素添加事件-删除
$(".info").on("click",".delete",function(){
console.log("进来了Delete！");
$(this).remove();
});
 }); 
</script>
 </head>
<body>
 <h2 class='add'>单击我添加动态元素</h2>
 <div class="info"></div>
 </body>
</html>
Copier après la connexion

以上代码就是本文对jquery append 动态添加的元素事件on 不起作用的解决方案，希望对大家学习有所帮助。

Étiquettes associées：
jquery动态添加元素 jquery_append事件
source：php.cn
Article précédent：javascript中递归函数用法注意点_基础知识 Article suivant：理解javascript中的原型和原型链
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Réécrivez le titre comme suit : Vue 3 : Transférer le contenu vers l'élément et remplacer J'utilise la téléportation de Vue3 pour restituer un élément dans un div et cela fonctionn...
Depuis 2023-11-06 11:01:38
0
1
451
Concevoir des tableaux de produits multifonctionnels avec plusieurs paramètres pour différents types de produits Je n'ai pas beaucoup d'expérience en conception de tables. Mon objectif est de créer une o...
Depuis 2023-10-18 17:44:13
0
2
328
Récupération de la largeur d'un élément lors de l'utilisation du rendu JSX en ligne dans une instruction return J'ai un élément et je souhaite calculer sa largeur, puis répéter le nombre de fois nécessa...
Depuis 2023-09-20 22:00:52
0
1
357
Ajoutez des valeurs aléatoires de type div à plusieurs éléments toutes les 60 secondes J'ai une page qui ressemble à ceci : <ahref="#"onclick="go('register')&q...
Depuis 2023-09-20 17:47:56
0
1
238
Comment créer un bouton en HTML avec les mêmes propriétés que la dernière ligne du tableau ? Considérons que j'ai un tableau en HTML : Accueil Service Contacts Maintenant, je veux jus...
Depuis 2023-09-16 22:19:11
0
1
343
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！