JS表單動態增加的問題

動態增加表單項時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()的方式來綁定事件的話。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章