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()的方式来绑定事件的话。
发布了34 篇原创文章 · 获赞 4 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/Tianyi_liang/article/details/73484715