JS实现为动态创建的元素添加事件操作示例
更新时间：2018年03月17日 14:29:31 作者：水火土要努力
这篇文章主要介绍了JS实现为动态创建的元素添加事件操作,涉及javascript页面元素动态添加及事件响应相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS实现为动态创建的元素添加事件操作。分享给大家供大家参考，具体如下：
html中直接生成的元素，添加事件，我们都知道，但是如何为一个动态生成的元素添加事件呢，jquery中的live方法可以做到这一点
具体实现可以在demo中看到
<!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>
<div id="panel"></div>
<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>
运行结果：
PS：关于javascript事件说明可参考本站javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
本篇文章主要是对关于onchange事件在IE和FF下的表现及解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
在Web前端开发中，需要将数据动态渲染到页面上，随着应用程序的复杂度增加，数据渲染的逻辑也变得越来越复杂，这时候就需要使用模板引擎来帮助我们动态生成HTML标记，本文将深入介绍 JavaScript 模板引擎，帮助读者更好地理解和应用模板引擎2023-06-06
这篇文章主要介绍了ionic2 tabs 图标自定义,需要的朋友可以参考下2017-03-03
今天教给大家如何使用数组的方法来实现JSON数据进行排序和搜索功能，具体实例代码大家参考下本文吧2017-07-07
这篇文章主要介绍了在JavaScript中判断整型的N种方法,需要的朋友可以参考下2014-06-06
本文主要介绍了浅谈JavaScript的几种继承实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了JavaScript截取、切割字符串的技巧,文中给大家提到了substr 和 substring方法的区别，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2016-01-01
这篇文章主要介绍了js跨域原理以及解决方案，跨域问题是由于javascript语言安全限制中的同源策略造成的，想要进一步了解跨域的朋友可以参考本文进行学习2015-12-12
这篇文章主要为大家详细介绍了js实现右键菜单功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了JavaScript制作简易的微信打飞机，只有简单的功能，大神们可以自由扩展哈。有需要的小伙伴可以参考下。2015-03-03
最新评论