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){
});

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