问题描述
我一直在使用普通的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);
}
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...