给动态生成的按钮添加事件

最新推荐文章于 2021-09-10 16:08:54 发布

迷茫的mm

最新推荐文章于 2021-09-10 16:08:54 发布

阅读量1.1k

点赞数

文章标签： javascript node.js

本文链接：https://blog.csdn.net/qq_45172866/article/details/105430391

版权

今天遇到了这个坑花了几个小时，给动态生成的按钮添加单击事件没有响应，参考这位大神的答案，完美解决了
https://blog.csdn.net/u013134432/article/details/85785356?utm_source=app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        .deleteBtn{
            width: 100%;
        }
    </style>
</head>
<body>
    <button id="selectBtn">查询数据</button>
    <button id="addBtn">添加数据</button>
    <input type="text" id="username" placeholder="用户名">
    <input type="password" id="password" placeholder="密码">
    <table border="1" width="500px"  class="root" cellpadding="0" cellspacing="0"></table>

    <script>
        $("#selectBtn").click(function (event) {
            //$("li").remove();
            $.ajax({
                type:"get",
                url:"http://localhost:3000/all",
                success:function (data) {
                    $(data).each(function (index,item) {
                        $(".root").append("<tr><td>"+item.id+"</td><td>"+item.username+"</td><td>"+item.password+"</td><td><button class='deleteBtn' value='"+item.id+"'>删除</button></td><td><button class='deleteBtn' >修改</button></td></tr>")
                    })
                }
            })
            
        })

       /* 刚开始使用这段代码，单击都没反应
       $('.deleteBtn').click(function (event) {
            console.log($(this).val());
            console.log($(this).attr("value"));
        })*/
		
		//使用这段代码就好啦
        $(document).on('click','.deleteBtn',function (e) {
            console.log($(this).val());
            console.log($(this).attr("value"));
        });
    </script>
</body>
</html>

在这里插入图片描述正常显示的效果

迷茫的mm

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
给动态生成的按钮添加事件

今天遇到了这个坑花了几个小时，给动态生成的按钮添加单击事件没有响应，参考这位大神的答案，完美解决了https://blog.csdn.net/u013134432/article/details/85785356?utm_source=app<!DOCTYPE html><html lang="en"><head> <meta charse...
复制链接

扫一扫