给ajax动态生成的页面元素循环绑定事件

给ajax动态生成的页面元素循环绑定事件

在写项目的时候，使用ajax动态生成了页面元素，但是同时需要给动态生成的页面元素绑定事件，百度了半天没找到理想的答案，于是自己写下怎么解决的。

---

ajax动态生成的元素

$("#sub").click(function(){
    var bodydata={
            svrCustName : $("#svrCustName").val(),
            svrType     :$("#svrType").val(),
            svrStatus   : $("#svrStatus").val()                
    }       
    $.ajax({
        type:'POST',
        url:"${pageContext.request.contextPath}/CstService/1/2",
        data:bodydata,
        success:function(result){
            lastnum=result.lastPage;
            var str ;
            var datalist = result.list;     
            for(var i in datalist){                     
            str +=  "<tr>"+
                    "<td class='list_data_number' id='id"+i+"'>"+datalist[i].svrId+"</td>"+
                    "<td class='list_data_text'>"+datalist[i].svrCustName+"</td>"+
                    "<td class='list_data_ltext'>"+datalist[i].svrDueTo+"</td>"+
                    "<td class='list_data_text'>"+datalist[i].svrRequest+"</td>"+
                    "<td class='list_data_text'>"+datalist[i].svrCreateBy+"</td>"+                      
                    "<td class='list_data_text'>"+"<form id='formTest' method='post' action='#'>"+"<input  name='svrDeal' id='svrDeal"+i+"'/>"+"<input type='button' id='inner"+i+"' value='提交处理'>"+"</form>"+"</td>"+                                      
                    "</tr>";                                                

            }
            $("#ajaxtest").html(str);              
        },
        dataType:"json" ,                   
    })  
})
for(var i=0;i<2;i++){
    //把变量i传给on方法，在方法内使用event.data来接收，这样就可以解决使用for循环 i不变的问题
    $("#ajaxtest").on("click","#inner"+i,{key:i},function(event){
        var svrId ="#"+"id"+event.data.key;
        var svrRe="#"+"svrDeal"+event.data.key;         
        var bodydata={
                svrId:$(svrId).text(),
                svrResult:$(svrRe).val()               
        }
        $.ajax({
            type:'POST',
            url:"${pageContext.request.contextPath}/dispatchUpdateRequest",    
            datatype:"json",
            data:bodydata,
            success:function(){             
                alert("提交处理")
            }                       
        })
        })
      } 

我需要对按钮 id=”inner”+i，绑定一个click事件，同时也要获取动态生成的元素中的值：
我们知道对于动态元素使用on()方法，但是有一个最大的问题是使用for循环来实现对多个元素循环绑定事件时，你会发现在拼接的字符串变量中，变量i的值始终是数组length+1；对于这个问题度娘上的回答是for循环中的变量i 默认是全局变量，而子函数的变量没有i，所以只能引用全局变量i的值，这样这个i值 就是循环结束后的那个i。

好像听起来有点费解吗，没事解决的方法很简单
    把for循环中的变量i 传给了 on()方法，这个参数会使用event.data来接收，如果对这点有疑惑的可以查阅jquery的帮助手册里面讲的很详细。