jQuery獲取動態產生的html內標簽或元素


下午分享《MVC編輯狀態兩個DropDownList聯動http://www.cnblogs.com/insus/p/3426563.html 不久,馬上有網友問及三級聯動的例子。Insus.NET回復他,會做二級聯動,三級應該不難。原理與方法是一樣的。

寫此篇的目的,還是處理jQuery怎樣獲取動態產生后的html的標簽或是元素。
還是先回過頭去看篇頭指定的鏈接的文章。一開始時,Insus.NET使用了jQuery的ajax產生了一數據行,並append至

 <tbody id="tbody1"></tbody>


但是,在后續的jQuery是很難找到append的html的標簽或元素。為了能找到兩個select下拉列表,Insus.NET當時只能把相關的代碼都寫在

 function OutputData(tbody, item) {}


這個自定義函數內。
這一直不是Insus.NET想要的。不太喜歡把什么代碼均寫在一個函數內,這樣日后的維護帶來相當大的困惑。當時完成它時,只求功能的實現。現在,Insus.NET決定再重構這部分。盡量把它能抽取的或是拆分的,都抽取和拆分成更細小,單獨的函數。

第一個可以抽取的是聯動有事件:


把它拿掉,並移出這個自定義函數外:



那change函數需要改為#93行的語法,另外事件中需要獲取兩個select的下拉列表,也需要分別改為#96和#98行,一個獲取控件之后,還要獲取其值,另一個僅是獲取控件。

第二個可移動的地方,是那個更新的數據的部分代碼:



可以寫在一個單獨立的

 $(document).ready(function () {}


代碼有變動的地方,可參考下圖高亮部分:



經這樣重構之后,能脫離這個函數的代碼,均移至

 function OutputData(tbody, item) {}

這個自定義函數外。

重構之后,此視圖完整代碼:




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM