[JavaScript知识库] 如何实现动态添加的元素绑定事件

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 如何实现动态添加的元素绑定事件 -> 正文阅读

[JavaScript知识库]如何实现动态添加的元素绑定事件

今天被问道如何给动态加载的数据绑定事件，于是在网上搜索解答方案如下：

第一种是在动态添加的html代码里添加onclick事件，并且传个唯一的参数来判断点击了哪个，

</div>

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>

</div>

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();

});