给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的帮助手册里面讲的很详细。
版权声明:本文为weixin_42254919原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。