jquery 中 在ajax中用on 进行事件托管的时候，如何将ajax的返回结果传进去

Question

我在前端页面中用ajax进行查询，查询得到结果后，把结果遍历完成页面渲染，然后再用on给渲染出来的元素进行时间绑定，现在遇到了一个问题，我每次打印传进去的参数，都和本次ajax的结果不一致，都是上一个ajax执行后的数据。

代码如下：

 $.ajax({
            type: "POST",
            url: "/module/capture/info?_token={{csrf_token()}}",
            data: data,
            success: function (info) {
           //第一次打印的结果
            console.log(info);
            //在这里进行渲染页面
            var html = '';
             $.each(info.captures,function(k,v){
                 html +='<div class="inner">'+v.name+'</div>' 
             }
             $('#outer').html(html);
             //然后要绑定事件啦，用on绑定            
             $('#outer).on('click','.inner',info,function(){
             //第二次打印
                     console.log(info);
             })
          
            }
            
            

按照我的想法，每次查出来的结果，两次打印应该一致，但是现在只有进入页面第一次是一致的，第二次查出来的data 是第一次ajax的info，第三次的data是第二次的info。

所以，参数没有传进去嘛？有没有大佬赐教一下~


补充一下截图：
第一次：

info :

data :

第二次：
info

data

第二次拿的是第一次的ajax的返回值，为什么。。

Answer 1

这么写试试：

 $.post('/module/capture/info?_token={{csrf_token()}}', data)
    .done(function (info) {
        console.log(info);
        var html = [];
        $.each(info.captures, function(key, value){
            var iii = $('<div>', {
                "class": 'inner',
                text: value.name,
                data: {
                    'url': info.capture_photo //将数据存在节点上
                }
                click: function() {
                    var thisUrl = $(this).data('url');
                    console.log(thisUrl);
                }
            });
            html.push(iii); 
        });
        $(html).appendTo('#outer');
    }

Answer 2

你这种写法，照理来说每执行一次ajax，.inner上就会多绑定一次click事件，多次执行ajax后，点击.inner就会把之前拉到的数据全打印出来才对啊。
你遇到的是只打印一条数据吗？