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

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);