ajax请求后动态生成节点的事件失效

来源：互联网发布：知所然又知其所以然编辑：程序博客网时间：2024/05/20 13:10

ajax请求后动态生成节点的事件失效

情景：

$(".btn").click(function(){$.ajax({url:"${pageContext.request.contextPath}/userController/delete.action",                method:"post",                data:{"username":username},                success:function(data){                    console.log(data);                    $(".tb").empty();                    $(".tb").append("<tr><td>用户名</td><td>密码</td><td>年龄</td><td>生日</td><td>操作</td></tr>");                    for(var i=0;i<data.length;i++){                        $(".tb").append("<tr class='tr"+i+"'></tr>");                        $(".tr"+i).append("<td class='un'>"+data[i].username+"</td>");                        $(".tr"+i).append("<td>"+data[i].password+"</td>");                        $(".tr"+i).append("<td>"+data[i].age+"</td>");                        $(".tr"+i).append("<td>"+new Date(data[i].birthday)+"</td>");                        $(".tr"+i).append("<td><button class='btn' onclick='rq()'>删除</button></td>");                    }                }            })})

方法：使用on（）绑定
原因：因为on能够绑定到父辈元素或body上，这些元素不会因ajax而改变

        var rq = function(){            $.ajax({    url:"${pageContext.request.contextPath}/userController/delete.action",                method:"post",                data:{"username":username},                success:function(data){                    console.log(data);                    $(".tb").empty();                    $(".tb").append("<tr><td>用户名</td><td>密码</td><td>年龄</td><td>生日</td><td>操作</td></tr>");                    for(var i=0;i<data.length;i++){                        $(".tb").append("<tr class='tr"+i+"'></tr>");                        $(".tr"+i).append("<td class='un'>"+data[i].username+"</td>");                        $(".tr"+i).append("<td>"+data[i].password+"</td>");                        $(".tr"+i).append("<td>"+data[i].age+"</td>");                        $(".tr"+i).append("<td>"+new Date(data[i].birthday)+"</td>");                        $(".tr"+i).append("<td><button class='btn' onclick='rq()'>删除</button></td>");                    }                }            })        }        $("body").on("click",".btn",rq);

阅读全文

0 0