jquery使用记录

阅读更多

 

 

1.绑定对象的事件方法,下面代码为一个点击删除事件

		$(function(){
				$(".my_del").click(function(event){
					var target = event.target;//获取当前点击事件的元素
					var key = jQuery(target).attr("key");//取当前点击事件元素的属性
					alert(key);
					var msg = "";
				        var url = '<%=request.getContextPath()%>/cmsconfig/my_update.jsp?type=3';
					$.ajax(
					{
				    	url:url,
				    	type:'post',
				    	asyn: false,
				    	data:
				    	{
				    		key:key
				    	},
				    	success:function(json)
				    	{
				    		try{
					    		var code;
					    		eval("code="+json);
					    		msg = "更新成功！";
					    		alert("code="+code);
					    		if(code == null || code.msg != true)
					    		{
					    			var c = ((code != null) ? code.code : "null");
					    			msg="更新失败failed("+c+")!";
					    		}
					    		else
					    		{
					    			msg = "更新成功ok！";
                                                                //查找出点击事件元素的父节中点为tr的元素,并删除之
                                                                var parents = jQuery(target).parents("tr");
						    		if(parents != null)
						    		{
						    			parents.remove();
						    		}	
					    		}
					    		jQuery("#msg").html(msg);
					    		jQuery("#msg").show();
					    		window.setTimeout("msgTip()", 2000);
					    	}catch(e){
					    		alert("#my_del success 有异常:"+e);
					    	}	
				    	},
				    	error:function()
				    	{
			    			msg = "网络调用失败！";
			    			jQuery("#msg").html(msg);
				    		jQuery("#msg").show();
				    		window.setTimeout("msgTip()", 2000);
				    	}
				    }
				    );//end of $.ajax
			   	});
			});

 2.绑定多个元素时,最好是以class 为查到对象,如果用id会导致只绑定一个元素.多个class以空格分开.下面例子中的my_del是新增加的,没有样式效果,纯粹为了绑定删除函数.

删除

 

3.json格式

错误格式:{msg:true}

正确格式:{"msg":true}代表msg为bool类型 或者{"msg":"true"} msg为字符类型

后台解释json格式的方法:

					    		var code;
					    		eval("code="+json);
或者
					    		eval("var code="+json);

 

 

4.append一个元素后,新的元素的事件不会被绑定的问题.

解决办法,使用jquery的live方法:

   $(function(){
				$(".my_del").live("click",function(event){
					....
			   	});
			});