jQuery click 無法在動態載入的控制項上運行

由於專案中會用到JQuery來動態載入控制項，原本的程式是在ASP.NET Create時就已經載入控制項的值，因此在JQuery註冊click事件的時候，其實是在已存在的控制項上註冊，因此可以成功Work，但在修改架構後，控制項的資料是來自於Web Service，因此控制項的載入在JQuery註冊click事件之後，所以會無法觸發。解決方法其實不難。

當控制項是動態載入的時候，注意幾個原則從已存在的控制項上來註冊事件，例如：

<div id="dialog" title="選擇縣市" style="display:none">
	<div class="city">
		<table id="tbCity">
		</table>            
	</div>
	<div class="divAreaClass" style="display:none">
		<table id="tbArea">
		</table>
	</div>
		<div class="divAreaClass" style="display:none">
		<table id="tbArea2">
		</table>
	</div>
</div>

其中table中的tr與td是動態載入的，也就是在點選某一個按鈕後才會去透過Web Service來接收，如下：

$.ajax({
	type: "POST",
	url: "localhost/getCity.asmx/GetList_CityCode",
	contentType: "application/json; charset=utf-8",
	dataType: "json",        
	success: function(data) {
		$.each(Sys.Serialization.JavaScriptSerializer.deserialize(data.d), function(key, item) {
			$tdCity = $("<tr><td><a id='cityClass' style='cursor:pointer' code='" + item.CITY_CODE + "'>" + item.CITY_NAME + "</a></td></tr>");
			$('#tbCity').append($tdCity);
		});
	},
	error: function(data) {
		alert("error:GetList_CityCode");
	}
});

透過ajax呼叫相同網域的Web Service取得城市名稱與編號，所以當要點選城市名稱後能夠在呼叫另一個Web Service來取得區域名稱與郵遞區號圖左是當點選按鈕時才動態載入的，而圖右是再點選縣市才再呼叫另一個Function來產生。

$('#tbCity').on('click', 'a', function () {
	//
	//...處理選擇狀態程式碼
	//
	//取得區域與郵遞區號function
     GetList_CityDivision($(this).attr('code'));
	//
	//...處理點選區域後程式碼
	//
});

由上方程式碼可以看到透過取得id='tbCity'的標籤下再該標籤內的a被click時才讀取code去呼叫，如果此時是透過.click來執行的話，會發現無法Work，所以記得如果是動態產生的控制項就透過上層的on方法來解決註冊事件的問題。

另外一提，如果透過JQuery的ajax來呼叫Web Method是無法跨網域存取的，這是Javascript的安全限制，如果要解決有兩個方法。
方法一、在自己的網域內寫Web Method來呼叫另一個網域的Web Method，然後JQuery 的ajax再呼叫自己的Web Method，就是透過Proxy來解決。
方法二、透過JSONP來解決，不過這是什麼?我還沒時間搞懂，等搞懂了再寫文章分享給大家囉。

參考資料：
1.jQuery click not working for dynamically created items – stackoverflow:http://stackoverflow.com/questions/9484295/jquery-click-not-working-for-dynamically-created-items
2.jQuery抓取跨網域外的資料(cross-domain) 運用JSONP - http://herolin.twbbs.org/entry/jsonp-cross-domain-jQuery-proxy-iframe/