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是新增加的,沒有樣式效果,純粹為了繫結刪除函式.

<button class="my_del button orange" key="<%=key%>" onclick='return false;'>刪除</button>

 

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