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

Posted 2023-05-09

【中文标题】jQuery克隆后Chrome错误地使表单输入无效

【英文标题】：Chrome incorrectly invalidating form input after jQuery clone

【发布时间】：2014-01-05 09:29:18

【问题描述】：

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

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

我知道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()，我猜这不是你所期望的

然后这个工作：$('<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');