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', //模块内定义拖动的元素
,这里也支持jquery选择器,如"span.drag_handle",标识拖动的是
. start: function(eent, ui) { //alert('开始拖') }, //开始拖触发的,从点击开始! stop: function(eent, ui) { //结束拖动,从放下模块开始! var s = gridster.serialize(); //$(selector).serialize()输出序列化表单的字符串,文件上传控件(例如:)类型的表单数据会被自动忽略,也就是说不会出现在序列化字符串中。 $.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('
  • ' + this.sn + '' + this.user + '' + this.status + '' + this.program + '' + this.percent + '%' + '
  • ', 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){
    });

    你可能感兴趣的:(javascript)