给ajax拼接的元素添加一个单击事件，并传入当前元素

首先我的需求是，我的进度条是使用ajax局部刷新的，然后我想在订单编号后面加一个点击事件获取对应的订单编号

首先我的解决思路，给一个单击事件，然后将选中的元素当成变量传入单击事件，通过找到父级获取对应的订单编号

首先我的进度信息的前端代码

 一开始我是没有在单击事件加this的，我是直接使用

$("#setTableTr").on('click','#getNumber',function (){
        $(this).parent()
})方式给元素添加单击事件的然后使用方法去获取父级的，结果我发现这样的活只要是id为getNumber的元素好几个，那么这就不行了，因为元素不确定

//订单进度
		window.onload = function  getres(){
			$.ajax({
				url:"order/getSpeedOfProgress.do",
				dataType:"json",
				type:"POST",
				success:function (requsetRes){
					var div
					var ass=[]
					var ct=[]
					var tt=[]
					var pk=[]
					for (var i=0;i<requsetRes.length;i++){
						ass.push(requsetRes[i].processprogress.ass_progress)
						ct.push(requsetRes[i].processprogress.ct_progress)
						tt.push(requsetRes[i].processprogress.tt_progress)
						pk.push(requsetRes[i].processprogress.pk_progress)
						div+='<div class="col-lg-12">'+
								'<div>'+'<span>'+requsetRes[i].order_id+'<span class="badge" id="getAbnormal" onclick="getabnormalOrderId(this)">'+requsetRes[i].abnormalcount+'</span>'+'</span>'+'</div>'+
								'<div class="col-lg-3">'+
									'<span class="label label-primary">'+"组装"+'</span>'+
									'<div class="progress">'+
										'<div class="progress-bar progress-bar-warning" id="zuzhuang" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.ass_progress+'</div>'+
									'</div>'+
								'</div>'+
								'<div class="col-lg-3">'+
									'<span class="label label-primary">'+"标定"+'</span>'+
									'<div class="progress">'+
										'<div class="progress-bar progress-bar-info" id="biaoding" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.ct_progress+'</div>'+
									'</div>'+
								'</div>'+
								'<div class="col-lg-3">'+
									'<span class="label label-primary">'+"检测"+'</span>'+
									'<div class="progress">'+
										'<div class="progress-bar progress-bar-danger" id="jiance" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.tt_progress+'</div>'+
									'</div>'+
								'</div>'+
								'<div class="col-lg-3">'+
									'<span class="label label-primary">'+"包装"+'</span>'+
									'<div class="progress">'+
										'<div class="progress-bar progress-bar-success" id="baozhuang" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">'+requsetRes[i].processprogress.pk_progress+'</div>'+
									'</div>'+
								'</div>'+
							'</div>'
					}
					$("#getProcess").html(div)
					//修改所有组装的进度样式
					var listDiv = document.getElementsByClassName("progress-bar progress-bar-warning")
					for (var j =0;j<listDiv.length;j++){
						listDiv[j].style.width=ass[j]
					}
					//修改所有标定的进度样式
					var listCT = document.getElementsByClassName("progress-bar progress-bar-info")
					for (var q=0;q<listCT.length;q++){
						listCT[q].style.width=ct[q]
					}
					//修改所有的检测
					var listTT = document.getElementsByClassName("progress-bar progress-bar-danger")
					console.log(tt)
					for (var w=0;w<listTT.length;w++){
						listTT[w].style.width=tt[w]
					}
					//修改所有包装进度
					var listPK = document.getElementsByClassName("progress-bar progress-bar-success")
					console.log(pk)
					for (var e=0;e<listPK.length;e++){
						listPK[e].style.width=pk[e]
					}
				}
			})
		}

 后来我在拼接的单击事件的中加入this，意思就是我点击的时候将点击的这个元素当作参数传入

下面的实现代码

function getabnormalOrderId(elenm){
			//获取异常数据是几位
			var en = $(elenm).text().length
			console.log(en)
			//获取当前元素父级文本信息
			var start = $(elenm).parents().get(0).innerText
			// console.log($(elenm).parents().get(0))
			//将父级的文本信息从0开始直到总长度进去异常数据的长度即为order_id的数值
			var order_id = start.slice(0,start.length-en)
			console.log(order_id)
			$.ajax({
				url: "order/selectAbnormalOrder.do",
				dataType: "json",
				type: "post",
				data:{"order_id":order_id},
				success:function (requsetRes){
					console.log(requsetRes.length)
					var tr
					for (var i=0;i<requsetRes.length;i++){
						tr+='<tr class="odd gradeX">'+
								'<td class="center">'+requsetRes[i].order_id+'</td>'+
								'<td class="center">'+requsetRes[i].meter_number+'</td>'+
								'<td class="center">'+requsetRes[i].testing_username+'</td>'+
								'<td class="center">'+requsetRes[i].back_step+'</td>'+
								'<td class="center">'+requsetRes[i].abnormal_information+'</td>'+
								'<td class="center">'+requsetRes[i].repairpeople_name+'</td>'
								+'</tr>'
					}
					$("#getAbnormalTable").html(tr)
				}
			})
		}

$(elenm).parents().get(0).innerText这样得到的是父级和子级一起的文本信息，然后我们将后面子级的文本信息去掉就行了，我发现父级文本信息在前，子级文本信息在后

我使用

var order_id = start.slice(0,start.length-en)截取的方式来获取我想要的信息，这里你们可以使用0-固定值来获取信息，也行

或者有大佬知道通过什么方法能直接获取到父级的文本信息的话那将更好，欢迎各位大佬指正并给出宝贵的优化建议