Web-ajax动态添加标签，事件委托中获取自定义标签值

最新推荐文章于 2022-02-22 13:54:18 发布

m0_47708972

最新推荐文章于 2022-02-22 13:54:18 发布

阅读量326

点赞数

文章标签： ajax html js

本文链接：https://blog.csdn.net/m0_47708972/article/details/109275591

版权

Web-ajax动态添加标签，事件委托中获取自定义标签值

首先是html
- ajax动态添加标签
- - 事件委托中获取自定义标签值

首先是html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" >
    <table>
        <tr>
            <td>日期</td>
            <td>标题</td>
            <td>天气</td>
        </tr>
        <tbody  id="Diary">
        <tr>
            <td>  9月10日</td>
            <td>今天是宝贝的生日 <a href="#">[删除]</a></td>
            <td>晴</td>
        </tr>
        </tbody>
    </table>           
</form>
</body>
</html>

ajax动态添加标签

<script src="../js/jquery-1.7.1.min.js"></script>
<script>
    $(()=>{
 
        updateWay();
        
        //更新数据方法
        function updateWay() {
 
            $.ajax({
                type:"post",//访问方式
                url:"../show" ,//访问地址
                dataType:"json",//返回数据类型
                success:function (data) {//回调函数　　　　　　　　　　　　
                    let contenr="";　　　　　　　　　　　　
                    // 将data中的petDiaryList进行遍历
                    $.each(data.petDiaryList,(i,obj)=>{　　　　　　　　　　　　　　
                    
                    	//动态拼接日志内容
                        contenr +=`<tr id="operate" >　　　　　　　　　　　　　　
                        //这里由于我日志实体类中的时间用的是LocalDateTime，所以获得年份是以obj.date.date.year　　　　　　　　　　　　　　
                        //同理月份也是obj.date.date.month
                     <td>${obj.date.date.year+"年"+obj.date.date.month+"月"+obj.date.date.day+"日"}</td>
                     <td>${obj.title}　　　　　　　　　　　　　　
                     //由于删除和修改时需要获得对应的id，，这里就自定义了一个标签来放该条日志的id，
                    <button class="btn btn-primary" content="${obj.id}" type="button" id="del" >删除</button>
                    <button class="btn btn-primary" content="${obj.id}" type="button" id="update" >修改</button>
                     </td>
                     <td>${obj.weather}</td>
                 </tr>`;
 
                    });　　　　　　　　　　　　
                    //将拼接的内容写入网页中
                    $("#Diary").html(contenr);
 
                }
            })
        }

事件委托中获取自定义标签值

接上面代码

//事件委托,获得自定义标签值 
		 // 方式一、通过事件源获得 这里的方法参数中记得写事件源（e）
        $("#Diary").on("click","#del",function (e) {　　　　　　　
        	//每次删除前都需确认是否删除
            let isDelete = window.confirm("确认删除？");
            if(isDelete == false){
                return;
            }
            $.ajax({
                type:"../delete",　　　　　　　　　　
                // 传递参数时通过 e(事件源).target(目标).attr(属性)（"自定义标签名"）来获得自定义标签的值
                data:{"id":$(e.target).attr("content")},
                dataType:"test",
                success:function (data) {
                    if(data == 1){
                        alert("成功删除日志")
                    }else{
                        alert("日志删除失败")
                    }
                }
            })
        });
 
        // 方式二、通过this点attr（自定义标签名）
         $("#Diary").on("click","#update",function(){　　　　　　
         //跳转页面进行修改业务，
           window.location.href= "updateDiary.html?id="+$(this).attr("content");
         });
 
    })
</script>

m0_47708972

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web-ajax动态添加标签，事件委托中获取自定义标签值

Web-ajax动态添加标签，事件委托中获取自定义标签值首先是htmlajax动态添加标签事件委托中获取自定义标签值首先是html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="#" > <t
复制链接

扫一扫