JS实现为动态创建的元素添加事件操作示例

来源：嘻游网

这篇文章主要介绍了JS实现为动态创建的元素添加事件操作,涉及javascript页面元素动态添加及事件响应相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS实现为动态创建的元素添加事件操作。分享给大家供大家参考，具体如下：

html中直接生成的元素，添加事件，我们都知道，但是如何为一个动态生成的元素添加事件呢，jquery中的live方法可以做到这一点

具体实现可以在demo中看到

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>www.gxlcms.com - 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>

运行结果：

上面是我整理给大家的，希望今后会对大家有帮助。

对vue里函数的调用顺序介绍

基于vue2.0动态组件及render详解

Vue实现动态创建和删除数据的方法