jQuery克隆后Chrome错误地使表单输入无效
Posted
技术标签:
【中文标题】jQuery克隆后Chrome错误地使表单输入无效【英文标题】:Chrome incorrectly invalidating form input after jQuery clone 【发布时间】:2014-01-05 09:29:18 【问题描述】:我在 Chrome 中克隆 a 时遇到问题。请注意,这似乎不会在 Firefox 中发生。
当我动态创建 input
并克隆它然后附加到表单时它不会验证,但是当我检查 Node
的 validityState
对象时说一切都很好。
我知道clone
没有多大意义,但它是我需要的一个简化的测试用例。是否有任何解决方案可以确保正确复制 DOM 数据?
$('<input type="text" required="required" />').val('08').clone().appendTo('#form1');
$('<input type="text" required="required" />').val('08').appendTo('#form2');
html:
<form id="form1"><input type="submit" value="Click me"/></form>
<form id="form2"><input type="submit" value="Click me"/></form>
提琴供参考:http://jsfiddle.net/x7aRt/1/
【问题讨论】:
刚刚在jsFiddle里试过,好像没有效果。 是的,刚刚也测试过了 jsfiddle.net/x7aRt/3 在 clone() 方法之后设置 val(),我猜这不是你所期望的 然后这个工作:$('<input type="text" required="required" />').val('08').clone().val(function()return this.value).appendTo('#form1');
但该死的奇怪
嗯,这可能就是我要找的东西。问题是我不知道克隆后的值,但将它设置回它自己的值可能会起作用。让我检查...
【参考方案1】:
看起来像 chrome (webkit?) 中的错误,或者可能与 jQuery 相关。
要验证输入,看起来您需要在克隆后重新设置值,没有多大意义但是...
$('<input type="text" required="required" />').val('08').clone().val(function()return this.value).appendTo('#form1');
【讨论】:
以上是关于jQuery克隆后Chrome错误地使表单输入无效的主要内容,如果未能解决你的问题,请参考以下文章
jQuery clone() FireFox 错误 - 无法提交克隆的表单
在 jQuery 中克隆或向表单添加输入不会提交到 Firefox 中的 PHP
name='' 的无效表单控件不可聚焦。没有任何必需或隐藏的输入