如何解决在没有全局功能的情况下将onclick事件传递到模板文字中
我一直在使用普通的javascript(仅不使用jquery javascript)在模板文字中添加onclick事件。如您所见,结果html知道每个div上的onclick事件都有功能,当我单击时会发出警报,但是当我单击时,它没有响应。似乎应该工作,但不知何故。
我从Stackoverflow获得了很多帮助,但是大多数anwser都在使用全局函数。但是我个人不想使用全局函数,因为有时会引起一些麻烦。
那么我该如何使用模板文字将函数实际传递给onclick事件?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="ul"></div>
</body>
<script src="/index.js"></script>
</html>
index.js
function test() {
const list = [
{ number: 1,check: () => alert("1") },{ number: 2,check: () => alert("2") },{ number: 3,check: () => alert("3") },];
const $list = list.reduce((acc,item) =>
acc + `<div onclick='${item.check}'>${item.number}</div>`,""
);
const $ul = document.querySelector("#ul");
$ul.innerHTML = $list;
}
test();
解决方法
创建实际的DOM元素,而不是通过HTML字符串构建DOM。
const $ul = document.querySelector("#ul");
for (const item of list) {
const element = document.createElement('div');
element.textContent = item.number;
element.onclick = item.check;
$ul.appendChild(element);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。