如何自制微信小程序_JS怎么完成动态添加的元素

摘要: JS怎样完成动态性加上的原素关联恶性事件 本文关键详细介绍了JS怎样完成动态性加上的原素关联恶性事件,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作...

JS如何实现动态添加的元素绑定事件       这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件。最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断点击了哪个,然后做相应的操作,第二种是通过事件委托的原理来处理,事件委托将一个事件侦听器实际绑定到整个容器,然后在单击它时能够访问每个列表项,这种更高效一些

具体的代码实现如下:

第一:onclick

 body 
 button 添加工作经历 /button 
 button 获取全部工作 /button 
 div id="joblist" 
 div id="job1" 
 input name="CompanyName" type="text" value="公司1" / 
 button 删除 /button 
 /div 
 /div 
 script type="text/javascript" 
 //添加工作经历
 function AddJob() {
 var timestamp = parseInt((new Date()).valueOf()); //唯一的标识
 console.log(parseInt((new Date()).valueOf()));
 document.getElementById("joblist").innerHTML +=
 ` div id="job` + timestamp + `" 
 input name="CompanyName" type="text" value="公司` + timestamp + `" / 
 button 删除 /button 
 /div 
 //删除工作经历
 function DelJob(timestamp) {
 document.getElementById("job" + timestamp).remove();
 //获取全部工作经历
 function GetJobs() {
 var jobs = document.getElementsByClassName("job");
 var arr = [];
 for (var i = 0; i jobs.length; i++) {
 var job = jobs[i];
 panyName = job.children[0].value;
 panyName);
 console.log(arr);
 alert(arr);
 /script 
 /body 

第二种:

document.getElementById('joblist').addEventListener('click', function (ev) {
 var target = ev.target || ev.srcElement;
 if (target.nodeName.toLowerCase() == 'button') {
 var e = document.getElementById(target.parentNode.id);
 document.getElementById("joblist").removeChild(e);
 });

效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:小程序开发