jQuery克隆后Chrome错误地使表单输入无效

Posted

技术标签:

【中文标题】jQuery克隆后Chrome错误地使表单输入无效【英文标题】:Chrome incorrectly invalidating form input after jQuery clone 【发布时间】:2014-01-05 09:29:18 【问题描述】:

我在 Chrome 中克隆 a 时遇到问题。请注意,这似乎不会在 Firefox 中发生。

当我动态创建 input 并克隆它然后附加到表单时它不会验证,但是当我检查 NodevalidityState 对象时说一切都很好。

我知道clone 没有多大意义,但它是我需要的一个简化的测试用例。是否有任何解决方案可以确保正确复制 DOM 数据?

javascript

$('<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(),我猜这不是你所期望的 然后这个工作:$('&lt;input type="text" required="required" /&gt;').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更改事件未更新

在 jQuery 中克隆或向表单添加输入不会提交到 Firefox 中的 PHP

name='' 的无效表单控件不可聚焦。没有任何必需或隐藏的输入

Chrome 上的 Jquery Form.submit() 有效,但在 Firefox 中无效

仅在 Google Chrome 中出现“无效的表单控件”