gpt4 book ai didi

javascript - 在没有 jQuery 的动态元素上单击事件

转载 作者:可可西里 更新时间:2023-11-01 02:30:35 25 4
gpt4 key购买 nike

我想向动态创建的元素添加一个事件,例如 onclick 或 mouseover(类似于 jQuery 中的 .live 函数)...我如何使用没有框架(例如 jQuery)的纯 javascript 来做到这一点?

document.getElementById('create').onclick = function(){
var newdiv = document.createElement('div');
newdiv.addClass('new');
document.body.appendChild(newdiv);
};

document.getElementsByClassName('newdiv').onclick = function(){
alert('Success');
};

#create {
width:150px;
height:25px;
margin-bottom:5px;
background:#ccc;
border:1px solid #222;
}

.new {
width:200px;
height:100px;
background:#ffccff;
border:1px solid #333;
}
<html>
<body>
<div id="create">
Click to create div
</div>
</body>
</html>

我希望能够从新创建的 div 类而不是 id 来执行此操作。

任何帮助将不胜感激

最佳答案

在文档对象上创建一个处理程序。检查目标元素的类和节点名称(标签)。如果它们匹配,则继续执行任何需要完成的操作,否则忽略点击。

document.onclick = function(event) {
var el = event.target;
if (el.className == "new" && el.nodeName == "DIV") {
alert("div.new clicked");
}
};

这是一个 fiddle .

关于javascript - 在没有 jQuery 的动态元素上单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5372490/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com