2012-08-15 85 views
0

我有一個表格,其中包含來自jQuery UI的提前輸入功能。當只有一個表格行(初始視圖)時,它正在處理我的表單。有一個按鈕允許用戶根據需要創建額外的表格行,這也會增加文本輸入和選擇菜單的ID。更新腳本以使用增加的ID運行新創建的表格行

還有另一個腳本根據typeahead選項將匹配值插入到選擇菜單中。這兩種方法都適用於第一行,但對於創建的任何其他行都停止工作。

我設置一個樣品的jsfiddle:

http://jsfiddle.net/fmdataweb/hxzME/1/

我想我明白他們爲什麼只對第一行的工作 - 它們被設置到這些ID:#lastYearSelect1和#nextYearSelect1 - 但我我不知道如何改變它們,所以他們然後使用#lastYearSelect2,#nextYearSelect2,#lastYearSelect3,#nextYearSelect3等。

+0

你將必須初始化'新創建的輸入autocomplete'。 – 2012-08-15 15:42:31

+0

謝謝@AndrewWhitaker - 你能夠幫助我確切的語法,因爲我無法在正確的位置添加自動完成功能。我迄今爲止的所有嘗試都破壞了劇本。 – user982124 2012-08-15 16:00:31

回答

1

該腳本存在一些問題。

首先你是對的,你需要在克隆行後重新設置所有的腳手架,clone方法不會複製功能,只是html元素。

要找到正確的元素,您可以使用與clone對象上的屬性名稱的起始匹配的JQuery ^=選擇器來查找要轉換爲自動填充字段的正確子輸入。您可以在該功能中執行相同的技巧,將下拉列表更改爲正確的功能。

最後,很多代碼和變量都在錯誤的範圍內,無法正常訪問。我移動了很多變數,所以他們可以訪問,主要是進入全球範圍。當你更有經驗時,你不會想這樣做,但現在這沒問題。

我也創建了一個新函數setDropDown,但是這個代碼和之前的代碼幾乎相同。

這裏是你的代碼的工作版本:

http://jsfiddle.net/hxzME/3/

+0

謝謝mattmanser - 太棒了。 – user982124 2012-08-15 16:53:43

+0

@ user982124我再次看了一遍代碼,我注意到如果你根據你的服務器端代碼添加10行以上,也會有一個小錯誤。如果你想知道修補程序,我很樂意添加它,除非你已經自己發現了它。 – mattmanser 2012-08-15 18:46:14

+0

我還沒有發現該錯誤 - 如果您可以添加修復程序,我將不勝感激,因爲我不確定問題所在。謝謝 – user982124 2012-08-15 23:36:11

0

將元素添加到元素,並在綁定事件處理函數時使用類選擇器。