JQuery 使用技巧(二): 为动态添加的子元素添加点击事件

现在有这样的一个需求:动态生成列表(使用的是 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 插件来处理相应的场景,当然如果时间充足的话自己写一套也是可以的。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注