今天被问道如何给动态加载的数据绑定事件，于是在网上搜索解答方案如下：
第一种是在动态添加的html代码里添加onclick事件，并且传个唯一的参数来判断点击了哪个，
<button οnclick="Add()">添加</button>
<button οnclick="Get()">获取</button>
<div id="joblist">
<div id="job1" class="job">
<input name="CompanyName" type="text" value="公司1" />
<button οnclick="Del(1)">删除</button>
</div>
</div>
<script>
function Add() {
var timestamp = parseInt(new Date().valueOf());
document.getElementById("joblist").innerHTML +=
'<div id="job' +
timestamp +
'" class="job"><input name="CompanyName" type="text" value="公司' +
timestamp +
'" /><button οnclick="Del(' +
timestamp +
')">删除</button></div>';
}
//删除工作经历
function Del(timestamp) {
document.getElementById("job" + timestamp).remove();
}
//获取全部工作经历
function Get() {
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>
<button οnclick="Add()">添加</button>
<button οnclick="Get()">获取</button>
<div id="joblist">
<div id="job1" class="job">
<input name="CompanyName" type="text" value="公司1" />
<button>删除</button>
</div>
</div>
<script>
function Add() {
var timestamp = parseInt(new Date().valueOf());
document.getElementById("joblist").innerHTML +=
'<div id="job' +
timestamp +
'" class="job"><input name="CompanyName" type="text" value="公司' +
timestamp +
'" /><button>删除</button></div>';
}
function Get() {
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);
}
alert(arr);
}
//获取全部工作经历
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);
}
});
</script>
</body>
也可以使用jquery方法：
//公式： $(selector).on(event,childSelector,data,function,map)
$("#joblist").on("click", ".job button", function() {
$(this)
.parent()
.hide();
});
相关知识点：
1.时间戳
利用new Date().valueOf()制造时间戳
时间戳就是从1970年1月1日0时0分0秒(世界标准时)到当前时间点的所有秒数
我们可以调用他的各种属性就像:document.getElementById("")这样的功能， event.srcElement 可以捕获当前事件作用的对象，
如event.srcElement.tagName可以捕获活动标记名称。
firefox 下的 event.target = IE 下的 event.srcElement 这是一种规范，
ie下支持e.srcElement，firefox 支持e.target。
nodeName
document.body.nodeName;
结果：BODY
toLowerCase()
toLowerCase() 方法用于把字符串转换为小写。
事件委托
事件对象在ie8中要通过window.event才能取到，因此e = e || window.event是做兼容处理
原文：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
