动态增加表单项时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()
的方式来绑定事件的话。