js动态生成的dom无法启动事件(click,mouseover......)

解决办法:

1.将执行事件的代码放在生成dom的 function 里面
 $.ajax({			
url: "url", //json文件位置
				//                    url: "serialization.json", //json文件位置
				type: "post", //请求方式为get
				//data: "{pareId:0}",
				async: true,
				contentType: "application/json",
				dataType: "json", //返回数据格式为json
				success: function(data) {
					var serialization = data.d;
					gridster = $(".gridster ul").gridster({
						widget_selector: "li",
						widget_base_dimensions: [200, 179],
						widget_margins: [2.6, 4],
						autogenerate_stylesheet: true,
						resize: {
							enabled: 'false', //允许放缩
							handle: '.resize' //html标签的css类名,按住此标签可以对网格进行放缩
						},
						serialize_params: function($w, wgd) { //$w为要输出位置的网格对象(li),wgd为该网格对象的座标对象,包括col,row,size //_x,size_y四个成员 
							return {
								id: $w.attr("id"),
								x: wgd.col,
								y: wgd.row,
								sn: $w.find(".sn").text(),
								name: '', //机器名字 
								location: '',
								duty: $w.find(".duty").text(), //负责人 
								vender: '',
								venderCncId: '',
								spec: '',
								productDT: '1900/1/1',
								buyDT: '1900/1/1',
								remark: '',
								user: '',
								percent: $w.find(".percent").text()
							}
						},
						draggable: {
							handle: 'li img', //模块内定义拖动的元素<header>,这里也支持jquery选择器,如"span.drag_handle",标识拖动的是<header>. 
							start: function(eent, ui) {
								//alert('开始拖') 
							}, //开始拖触发的,从点击开始! 
							stop: function(eent, ui) { //结束拖动,从放下模块开始! 
								var s = gridster.serialize(); //$(selector).serialize()输出序列化表单的字符串,文件上传控件(例如:<input type="file" name="myfile"/>)类型的表单数据会被自动忽略,也就是说不会出现在序列化字符串中。 
								$.ajax({
									type: "POST",
									url: "url", //请求地址
									async: true,
									contentType: "application/json",
									dataType: "json", //返回数据格式为json 
									data: "{strLocationJson:'" + JSON.stringify(s) + "'}",
									success: function(data, status) {
										console.log("success!")
									} //必须设置为同步模式,即回调函数执行完毕后才向下执行(unload页面)
								}); //也可以从start里面开始拖的时候显示个提交的框框, 拖完了点击提交后进行ajax请求数据库! 
							}
						}, //设置serialize()方法的返回值 
					}).data('gridster');
					gridster.remove_all_widgets(); //刷新 
					$.each(JSON.parse(serialization), function() {
						gridster.add_widget('<li id=' + this.id + '><img src=img/' + this.statusColor + '.png/><span class=sn>' + this.sn + '</span><span class=duty>' + this.user + '</span><span class=status style=color:' + this.statusColor + '>' + this.status + '</span><span class=program>' + this.program + '</span><span class=percent>' + this.percent + '%' + '</span><span class= edit></span><span class=delete></span></li>', this.width, this.height, this.x, this.y, "", "", this.id);
					}); // 鼠标划过事件 $("#gridster li ").mouseover(
					function() { //显示删除图标 
						$(this).find(".edit").css("display", "block");
						$(this).find(".delete").css("display", "block");
					});$("#gridster li").mouseout(
					function() { //隐藏删除图标 
						$(this).find(".edit").css("display", "none");
						$(this).find(".delete").css("display", "none");
					});
			}
			});
2.async:false//将模式设置成同步就可以了
    $.ajax({
    type : "post",
    url : url,
    dataType : "json",
    async:false//设置成同步就可以了
    }).done(function(data){
});

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章