動態增加表單項時JS要注意的問題
事件綁定問題
如果是具有功能的表單項(比如時間插件,動態選取的控件等等),切記通過添加HTML文本的方式新添加的項是不會主動去綁定頁面裏事件,而通過克隆(clone())的方式添加的項是會帶着事件一起過去的。避免這些問題複雜化的方法有一種:將事件綁定在上一層上面。比如:一個table裏有好多按鈕,爲了動態的增刪按鈕而不被事件綁定困擾,使用以下的方式:
$('table').on('click', 'button', function () {
// click function
})
這樣button無論進行什麼操作,事件都不在button身上,也就不會有複雜的情況出現了。
Clone()方法帶來的問題
首先如果是clone單選框(radio),如果clone過去後先執行append()操作再改屬性的話,就會因爲改屬性之前他們的input name是一樣的從而把已選的移動到新的框上,所以要先改好屬性然後在生成出來。
增加表單項(Add Field)
很多時候添加的表單不是一次生成好的,當需要動態添加一項兩項,甚至一塊兩塊的時候,有很多問題需要注意:
- 原來項和生成項有一統一class,用於計算當前有增加了幾個項,刪減的時候也方便保留第一項。
- 用FormValidation的話,
.help-block
類要刪除,這是頁面加載時生成的錯誤提示項。 - 選擇當前區域所有輸入項的話,可以用
[name^="xxx"]
(以xxx開頭的name)來選取所有。 - 對於clone過來的新項,習慣性的把id和name的數字替換掉value值清空,防止id和name出現衝突。
- 不要忘了重新添加之前綁定的事件,如果沒有使用
.on()
的方式來綁定事件的話。