When on is used for event hosting in ajax in jquery, how to pass the return result of ajax into it

I use ajax to query the front-end page. After getting the query result, I traverse the results to render the page, and then use on to bind the rendered elements. Now I encounter a problem. Every time I print and transfer the parameters, they are not consistent with the results of this ajax. They are all the data after the execution of the last ajax.

the code is as follows:

 $.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>" 
             }
             $("-sharpouter").html(html);
             //on            
             $("-sharpouter).on("click",".inner",info,function(){
             //
                     console.log(info);
             })
          
            }
            
            

in my opinion, every time the results are checked out, the two prints should be the same, but now only the first time you enter the page is the same, and the second time you check out the data is the first ajax"s info, and the third data is the second info.

~


:
:

info:

data :

:
info

data

the second time is the return value of the first ajax, why.

Mar.16,2021

try to write it this way:

  

the way you write it, each time you execute ajax,.inner, you will bind more click events to the click event. After executing ajax several times, click .inner to print all the data pulled before.
do you encounter printing only one piece of data?

Menu