recherche

Maison  >  Article  >  interface Web  >  jquery ajoute un événement d'élément ajouté dynamiquement sur ne fonctionne pas solution_jquery

jquery ajoute un événement d'élément ajouté dynamiquement sur ne fonctionne pas solution_jquery

WBOY
WBOYoriginal
2016-05-16 15:48:091315parcourir

Il est facile d'ajouter de nouveaux éléments avec jquery. Comment devrions-nous résoudre le problème selon lequel l'événement on d'éléments ajoutés dynamiquement dans jquery append ne fonctionne pas ? Dans la méthode on, vous devez d'abord rechercher le sélecteur d'origine (tel que .info), puis rechercher le sélecteur ajouté dynamiquement (tel que column.delete).

Je n'entrerai pas plus dans les détails, veuillez regarder le code ci-dessous. 

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

Le code ci-dessus est la solution de cet article au problème selon lequel l'événement d'élément ajouté dynamiquement par jquery append ne fonctionne pas. J'espère qu'il sera utile à l'apprentissage de tout le monde.

Déclaration：
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
Article précédent：Points à noter lors de l'utilisation de fonctions récursives dans les connaissances JavaScript_BasicArticle suivant：Points à noter lors de l'utilisation de fonctions récursives dans les connaissances JavaScript_Basic

Articles Liés

Voir plus