现在有这样的一个需求：动态生成列表（使用的是 ul），并且每一项（li）里面都有一个 “详情” 按钮，现在需要实现点击按钮，然后弹窗并通过 id 显示详情。
1. JS 原生：每个按钮都添加一个 onclick
直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态子元素组件点击</title>
<style type="text/css">
li {
margin-top: 10px;
}
</style>
</head>
<body>
<ul id="parent">
</ul>
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
<script>
$(function () {
let apiList = [
{"id": 1, "title": "我是Roc1"},
{"id": 2, "title": "我是Roc2"},
{"id": 3, "title": "我是Roc3"}]
let element = [];
apiList.forEach((item, index) => {
element.push("<li>" + item.title);
element.push("<button onclick='btnClick(" + item.id + ")'>详情</button>")
element.push("</li>");
})
$("#parent").html(element.join(''));
});
function btnClick(id) {
// 加载后台接口
console.log("点击的 id : " + id)
}
</script>
</body>
</html>【注】这种方式简单而且粗暴，并且也不需要浪费太多时间！！ 但是体现不出高技术水平呀，既然项目中都用了 JQuery 了，那肯定要使用 JQuery 的方式处理。
2. JQuery：通过 on 添加事件监听
这里需要注意 JQuery 提供的 click 函数只能为 document 初始化完成前已经存在的元素添加点击事件，如果一个列表是通过 JavaScript 动态添加的，使用 click 函数将不会生效，因为在 document 初始化完成前根本就没有这一个元素。
这个时候可以通过使用 on 函数来注册事件，上面的代码也可以通过下面的方式实现，只不过我们需要找一个地方将 id 保存起来，这个时候可以使用 HTML5 提供的 data- 属性，实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态子元素组件点击</title>
<style type="text/css">
li {
margin-top: 10px;
}
</style>
</head>
<body>
<ul id="parent">
</ul>
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
<script>
$(function () {
let apiList = [
{"id": 1, "title": "我是Roc1"},
{"id": 2, "title": "我是Roc2"},
{"id": 3, "title": "我是Roc3"}]
let element = [];
apiList.forEach((item, index) => {
// 将 id 保存在 li 元素中。
element.push("<li data-id='" + item.id + "'>" + item.title);
element.push("<button>详情</button>")
element.push("</li>");
})
$("#parent").html(element.join(''));
});
$('#parent').on('click','button',function () {
// button 是嵌套在 li 中的，所以这里需要使用 parent() 找到 li
let id = $(this).parent().data("id");
// 加载后台接口
console.log("点击的 id : " + id)
});
</script>
</body>
</html>因为 data-id 放在了 li 元素上，button 是嵌套在 li 中的，所以这里通过 JQuery 提供的获取父元素的方式（$(this).parent()）进行获取；如果是在 button 上添加了 data-id，那么直接 $(this).data('id') 获取即可。
【注】这里仅仅是演示为动态的子元素添加点击事件，实际写项目的过程中也可以这样写，当然为了更加的省事与高效，可以通过使用已经封装好的官方或者第三方的 JQuery 插件来处理相应的场景，当然如果时间充足的话自己写一套也是可以的。