鍍金池/ 問(wèn)答/PHP  HTML/ jquery 中 在ajax中用on 進(jìn)行事件托管的時(shí)候,如何將ajax的返回結(jié)

jquery 中 在ajax中用on 進(jìn)行事件托管的時(shí)候,如何將ajax的返回結(jié)果傳進(jìn)去

我在前端頁(yè)面中用ajax進(jìn)行查詢(xún),查詢(xún)得到結(jié)果后,把結(jié)果遍歷完成頁(yè)面渲染,然后再用on給渲染出來(lái)的元素進(jìn)行時(shí)間綁定,現(xiàn)在遇到了一個(gè)問(wèn)題,我每次打印傳進(jìn)去的參數(shù),都和本次ajax的結(jié)果不一致,都是上一個(gè)ajax執(zhí)行后的數(shù)據(jù)。

代碼如下:

 $.ajax({
            type: "POST",
            url: "/module/capture/info?_token={{csrf_token()}}",
            data: data,
            success: function (info) {
           //第一次打印的結(jié)果
            console.log(info);
            //在這里進(jìn)行渲染頁(yè)面
            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);
             })
          
            }
            
            

按照我的想法,每次查出來(lái)的結(jié)果,兩次打印應(yīng)該一致,但是現(xiàn)在只有進(jìn)入頁(yè)面第一次是一致的,第二次查出來(lái)的data 是第一次ajax的info,第三次的data是第二次的info。

所以,參數(shù)沒(méi)有傳進(jìn)去嘛?有沒(méi)有大佬賜教一下~


補(bǔ)充一下截圖:
第一次:

info :圖片描述

data :圖片描述

第二次:
info 圖片描述

data 圖片描述

第二次拿的是第一次的ajax的返回值,為什么。。

回答
編輯回答
凹凸曼

你這種寫(xiě)法,照理來(lái)說(shuō)每執(zhí)行一次ajax,.inner上就會(huì)多綁定一次click事件,多次執(zhí)行ajax后,點(diǎn)擊.inner就會(huì)把之前拉到的數(shù)據(jù)全打印出來(lái)才對(duì)啊。
你遇到的是只打印一條數(shù)據(jù)嗎?

2017年9月17日 15:18
編輯回答
溫衫

這么寫(xiě)試試:

 $.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 //將數(shù)據(jù)存在節(jié)點(diǎn)上
                }
                click: function() {
                    var thisUrl = $(this).data('url');
                    console.log(thisUrl);
                }
            });
            html.push(iii); 
        });
        $(html).appendTo('#outer');
    }
2018年2月25日 19:07