in jQuery, Ajax partial page refresh after sending method

Scenario:

Users click function, JavaScript dynamically generated DOM tree, and then click Delete user, after successfully deleted, refresh the page

Ideas:

Ajax to be transmitted together with a memory function

 

 Then, when the user clicks, the function is executed, and then generates the DOM tree,

Then again, when the user clicks the delete button on this page, send an Ajax request a delete command, after the removal is complete, the function is called again, requesting data to complete the refresh demand.

function navlist(){
    $("#content").html(
        "<table class='table table-border table-bordered table-hover tablelook'><tbody><tr><th>标题</th><th>图标</th><th>网址</th><th>文字</th><th>操作</th></tr></tbody></table>"
    );
    $.ajax({
        type: "get",
        url: "/nav/u/navlist",
        dataType: "json",
        success: function (response) {
            var datajs = response.data;
            for (let index = 0; index < datajs.length; index++) {
                $(".tablelook").append(
                    "<tr>" +
                    "<td>" + datajs[index].title + "</td>" +
                    "<td><img style='width:20px' src=" + datajs[index].img + "></td>" +
                    "<td><p style='overflow: hidden;'>" + datajs[index].href + "</p></td>" +
                    "<td>" + datajs[index].alt + "</td>" +
                    "<td>" +
                    "<a href='javascript:;' data_id='" + datajs[index].id + "'>改</a>" +
                    "<span> | </span>" +
                    "<a href='javascript:;' data_id='" + datajs[index].id + "'>删</a>" +
                    "</td>" +
                    "</tr>"
                );
            }
            $(".tablelook a:odd").click(function (e) {
                e.preventDefault();
                Tan ( '! prompt', 'Oh, I want to delete the ~' );
                $(".modal-footer .btn").click(function () {
                    $.ajax({
                        type: "post",
                        url: "/nav/u/del",
                        data: "id=" + $(".tablelook a:odd").attr('data_id'),
                        dataType: "json",
                        success: function (response) {
                            if (response.state) {
                                info ( 'deleted successfully!' );
                                navlist ();
                            } else {
                                info ( 'delete failed' );
                            }
                        }
                    });
        
                });
            });
           
        }
    });
}
$("#btn_adminc").click(function (e) {
    e.preventDefault();
    navlist ();
});

View Code