jquery的autocompelete()自动完成事件以及后追加的页面元素无法绑定事件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35027520/article/details/76537995

最近在写一个医疗SPD供应链管理项目，其中的查询和追加功能界面参数值的获取，大量使用了jQuery的autocompelete()，

下面是部分js代码

$("#hospitaldrugcode").autocomplete({
	minLength: 1, source: function (request, response) {
		$.ajax({
			type: "POST",  
			url: url ,
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success:function(data){
				response($.map(data.ajaxResult, function (item) {
					return{ 
						label:item.hospitaldrugname+"/"+item.hospitaldrugcode+"/"+item.hospitalproducername+"/"+item.goodscodesplit+"/"+item.hospitalspec,
						//label为显示在input框内的内容
						hospitaldrugcode: item.hospitaldrugcode,
						hospitalspec: item.hospitalspec,
						hospitalunits: item.hospitalunits,
						hospitalproducttype: item.hospitalproducttype,
						hospitalproducername: item.hospitalproducername
					};
				}));
			},error:function(XMLHttpRequest) {
				// 获得超时标志
				var sessionstatus=XMLHttpRequest.getResponseHeader("sessionstatus");
				// 判断超时
				if(sessionstatus=="timeout"){
				    alert("登录超时,请重新登录！");
				    //如果超时就处理 ，指定要跳转的页面
				    var url = "${pageContext.request.contextPath}" + "/main/logout.do";
				    window.location.replace(url);
				}else{
				    alert("请求失败,请重新执行");
				}
			}
		});
	},select: function( event, ui ) {
		//将获取到的值赋给对应的input框，建议给本input框添加一个onchange事件，如果触发该事件，清空这些数据
		$("#hospitaldrugcode").val(ui.item.hospitaldrugcode);
		$("#hospitalspec").val(ui.item.hospitalspec);
		$("#hospitalunits").val(ui.item.hospitalunits);
		$("#hospitalproducttype").val(ui.item.hospitalproducttype);
		$("#hospitalproducername").val(ui.item.hospitalproducername);
		return false;
	}
});

当然还有另外一种情况，动态追加的HTML元素无法触发该事件，比如说我可能需要动态追加多行进行批量提交

，这时候需要用到on()进行事件绑定,这应该是1.9版本之后才有的

代码如下

var trHTML="";

$("#datatable").append(trHTML);
$("#datatable").on('click','.hospitaldrugcode',function autocompelete(){
	$(".hospitaldrugcode").autocomplete({
		minLength: '1', source: function (request, response) {
			$.ajax({
				type: "POST", 
				url: url2,
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success:function(data){
					response($.map(data.ajaxResult, function (item) {
						return{ 
							label:item.hospitaldrugname+"/"+item.hospitaldrugcode+"/"+item.hospitalproducername+"/"+item.goodscodesplit+"/"+item.hospitalspec,
							hospitaldrugcode: item.hospitaldrugcode,
							hospitalspec: item.hospitalspec,
							hospitalunits: item.hospitalunits,
							hospitalproducttype: item.hospitalproducttype,
							hospitalproducername: item.hospitalproducername
						};
					}));
				},error:function(XMLHttpRequest) {
					// 获得超时标志
					var sessionstatus=XMLHttpRequest.getResponseHeader("sessionstatus");
					// 判断超时
					if(sessionstatus=="timeout"){
						alert("登录超时,请重新登录！");
						//如果超时就处理 ，指定要跳转的页面
						var url = "${pageContext.request.contextPath}" + "/main/logout.do";
						window.location.replace(url);
					}else{
						alert("请求失败,请重新执行");
					}
				}
			});
		},select: function( event, ui ) {
			//通过层次选择器将第n次自动获取的数据赋给对应的input框
			$(this).val(ui.item.hospitaldrugcode);
			$(this).parent().parent().next().next().children().children().val(ui.item.hospitalspec);
			$(this).parent().parent().next().next().next().next().children().children().val(ui.item.hospitalunits);
			$(this).parent().parent().next().next().next().next().next().next().children().children().val(ui.item.hospitalproducttype);
			$(this).parent().parent().next().next().next().next().next().next().next().next().children().children().val(ui.item.hospitalproducername);
			return false;
		}
	});
});

 

扫描二维码关注公众号，回复： 3717215 查看本文章