如何实现动态添加的元素添加点击事件
web前端开发
共 2976字，需浏览 6分钟
·
2021-10-26 10:40
原生JavaScript
第一：onclick
<body><button onclick="AddJob()">添加工作经历</button><button onclick="GetJobs()">获取全部工作</button><div id="joblist"><div id="job1" class="job"><input name="CompanyName" type="text" value="公司1" /><button onclick="DelJob(1)">删除</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 + `" class="job"><input name="CompanyName" type="text" value="公司` + timestamp + `" /><button onclick="DelJob(` + timestamp + `)">删除</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];var companyName = job.children[0].value;arr.push(companyName);}console.log(arr);alert(arr);}</script></body>
第二种addEventListener：
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);}});
jquery实现
从 jQuery 1.7 开始，您应该使用on的方式，语法如下：
$(staticAncestors).on(eventName, dynamicChild, function() {});
解释：
这称为事件委托，其工作原理如下。该事件附加到staticAncestors应处理的元素的静态父级 ( )。
每次在此元素或后代元素之一上触发事件时，都会触发此 jQuery 处理程序。
然后处理程序检查触发事件的元素是否与您的选择器 ( dynamicChild)匹配。当匹配时，您的自定义处理程序函数将被执行。
在此之前，推荐的方法是使用live()：
$(selector).live( eventName, function(){} );
然而，live()在 1.7 中被弃用on()，而在 1.9 中被完全删除。
$(selector).live( eventName, function(){} );
可以替换为以下on()方法：
$(document).on( eventName, selector, function(){} );
例如，如果您的页面使用类名动态创建元素，dosomething您会将事件绑定到已经存在的父级（这是这里问题的核心，您需要绑定到存在的东西，不要绑定到动态内容），这可以（也是最简单的选项）是document. 尽管记住document可能不是最有效的选择。
$(document).on('mouseover mouseout', '.dosomething', function(){// what you want to happen when mouseover and mouseout// occurs on elements that match '.dosomething'});
事件绑定时存在的任何父级都可以。例如
$('.buttons').on('click', 'button', function(){// do something here});
将适用于
<div><!-- <button>s that are generated dynamically and added here --></div>
本文完
学习更多技能
请点击下方公众号
评论