jquery.html()与表单的奇怪行为

Question

我有以下html:

<div class="copy_me_text">
    <div>
        <input type="text" name="name" />
        <input type="hidden" name="id" />
    </div>
</div>

<div class="copy_me_hidden">
    <div>
        <input type="hidden" name="name" />
        <input type="hidden" name="id" />
    </div>
</div>

并遵循js代码:

var $cloned_text = $('.copy_me_text').clone();
$cloned_text.find('input[name="name"]').val("SOMETHING");
$cloned_text.find('input[name="id"]').val("SOMETHING");
console.log($cloned_text.html());

var $cloned_hidden = $('.copy_me_hidden').clone();
$cloned_hidden.find('input[name="name"]').val("SOMETHING");
$cloned_hidden.find('input[name="id"]').val("SOMETHING");
console.log($cloned_hidden.html());

输出对我来说很奇怪:

<div>
    <input name="name" type="text">
    <input value="SOMETHING" name="id" type="hidden">
</div>
<div>
    <input value="SOMETHING" name="name" type="hidden">
    <input value="SOMETHING" name="id" type="hidden">
</div>

我也创建了jsFiddle 示例.这是正确的行为吗？我不明白,为什么在.html()功能上,价值input type="text"不归还.

Answer 1

这不是一个奇怪的jQuery行为,它是一个奇怪的DOM效果.jQuery.val()除了设置元素的value属性之外别无其他<input>."属性"是指DOM 属性而不是节点属性 - 请参阅.prop()vs .attr()获取差异.

该.html()方法返回innerHTMLDOM 的序列化,预计只显示元素的属性 - 它们的属性是无关紧要的.这是默认行为,当您希望序列化输入值时,您需要将它们显式设置为属性 - $input.attr("value", $input.prop("value")).

那么为什么简单val()的隐藏输入元素呢？原因是HTML规范.有反映IDL属性,其中DOM属性与节点属性耦合,但value属性不是那些属性.然而,值IDL属性具有特殊模式,其中它以不同的方式作出反应.引用规范:

该属性采用以下模式之一,用于定义其行为:

值

获取时,它必须返回元素的当前值.在设置时,它必须将元素的值设置为新值,设置元素的脏值[...并执行许多其他操作].

默认

获取时,如果元素具有value属性,则必须返回该属性的值; 否则,它必须返回空字符串.在设置时,必须将元素的value属性设置为新值.

["默认/开启"和"文件名"模式]

指出不同？现在,让我们来看看美国的的类型属性.实际上,如果我们查看簿记详情部分,我们可以注意到在该hidden州,

该valueIDL属性适用于这个元素,并在模式默认

- 在所有其他(文本)状态中,模式为"值".

TL; DR:

(仅)在<input type="hidden">元件,设置valueDOM属性(input.value = …,$input.val(…),$input.prop("value", …))也设置value属性,并且使得用于序列化innerHTML/ .html().

Answer 2

这肯定看起来像jQuery中的一个错误.您可以使用以下attr()函数强制它返回:

$cloned_text.find('input[name="name"]').attr('value', "SOMETHING");

查看更新的小提琴