js中ajax请求数据之后的click事件失效问题

Question

代码不多，用死数据渲染是点击生效的，但换成ajax之后点击就失效了，是ajax默认异步的关系吗？请教一下各位

(function () {
    //获取数据
    function getInfo() {
        $.ajax({
            url: nowInfo.get,
            get: 'get',
            data: getUrlInfo,
            success: function (data) {
                getDom(data)//渲染dom
            }
        })
    }
    
    getInfo()
    
    function getDom(data) {
        //渲染dom代码省略....
    }
    
    //这里的点击事件就失效了。$(".detall")这个class="detall"是在getDom()里渲染出来的
    $(".detall").click(function () {
        $(".dialog-body").show();
    });
})()

Answer 1

你用ajax获取数据，动态渲染dom节点，你的事件绑定在detall，在dom没有完全渲染在页面中时，绑定的事件是不生效的，你可以使用事件委托来处理，将事件绑定在detall的父级上，如下：
$(parentDom).on('click', '.detall', function(){})

Answer 2

在渲染dom后再绑定事件，或者

$(document).on('click', '.detall', function () {
    $(".dialog-body").show();
});

Answer 3

(function () {
    //获取数据
    function getInfo() {
        $.ajax({
            url: nowInfo.get,
            get: 'get',
            data: getUrlInfo,
            success: function (data) {
                getDom(data)//渲染dom
                //这里的点击事件就失效了。$(".detall")这个class="detall"是在                       getDom()里渲染出来的
                //最简单的方法
                $(".detall").click(function () {
                    $(".dialog-body").show();
                });
            }
        })
    }
    
    getInfo()
    
    function getDom(data) {
        //渲染dom代码省略....
    }
    
    
})()