Maison > Article > interface Web > Exemple d'implémentation JS d'ajout d'opérations d'événement à des éléments créés dynamiquement
Exemple d'implémentation JS d'ajout d'opérations d'événement à des éléments créés dynamiquement
- 亚连original
- 2018-05-29 16:22:281725parcourir
Cet article présente principalement l'implémentation JS de l'ajout d'opérations d'événement à des éléments créés dynamiquement, impliquant l'ajout dynamique d'éléments de page javascript et des compétences opérationnelles liées à la réponse aux événements. Les amis dans le besoin peuvent s'y référer
Les exemples dans. cet article décrit les opérations d'événement d'implémentation JS pour les éléments créés dynamiquement. Partagez-le avec tout le monde pour référence, les détails sont les suivants :
Nous savons tous comment ajouter des événements à des éléments directement générés en HTML, mais comment ajouter des événements à un élément généré dynamiquement ? en jquery, vous pouvez faire cela live
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net - JS实现为动态创建的元素添加事件</title>
<script src="js/lib/jquery-1.7.2.min.js"></script>
</head>
<body>
<button id="btn">添加事件</button>
<p id="panel"></p>
<script>
// js原生实现
// var btn=document.getElementById("btn");
// btn.onclick=function(){
// var arr= [];
// for(var i=0;i<10;i++){
// arr.push("<p id='nep'>"+i+"</p>");
// }
//
// document.getElementById("panel").innerHTML=arr.join('<br/>');
// }
//
//jquery部分实现
$("#btn").click(function(){
var arr= [];
for(var i=0;i<10;i++){
arr.push("<p id='nep'>"+i+"</p>");
}
$("#panel").html(function(){
return arr.join("<br/>");
});
});
//为动态创建的html标签元素添加事件
$("#nep").live("click",function(){
var that=$(this);//获取当前点击的this对象
console.log(that.text());
});
</script>
</body>
</html> Résultats en cours d'exécution :
Introduction à la séquence d'appel des fonctions dans vue
Explication détaillée des composants dynamiques et rendu basé sur vue2. 0
Vue implémente des méthodes de création et de suppression dynamiques de données
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!