jquery.html()表单的奇怪行为
我有以下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 example。这是正确的行为吗？我不明白，为什么在.html()函数中，不返回input type="text"的值。
回答 5
Stack Overflow用户
发布于 2013-01-21 23:02:25
这不是一个奇怪的jQuery行为，它是一个奇怪的DOM效果。jQuery.val()除了设置<input>元素的value属性外，什么也不做。我所说的“属性”指的是DOM属性，而不是节点属性--有关区别，请参阅.prop() vs .attr()。
返回DOM的innerHTML序列化的.html()方法应该只显示元素的属性-它们的属性是无关的。这是默认行为，当您想序列化输入值时，需要显式地将它们设置为attributes - $input.attr("value", $input.prop("value"))。
那么，为什么简单的val()要在隐藏的输入元素上工作呢？原因是HTML规范。还有reflecting IDL attributes，其中DOM属性与节点属性耦合，但value属性不是其中之一。然而，value IDL attribute有特殊的模式，在这些模式下它的反应是不同的。引用规范：
该属性处于定义其行为的以下模式之一：
值
在获取时，它必须返回元素的current value。在设置时，它必须将element's value设置为新值，设置元素的脏值…做很多其他的事情。默认
在获取时，如果元素具有value attribute，则必须返回该属性的值；否则，必须返回空字符串。在设置时，它必须将元素的value attribute设置为新值。"default/on“和"filename”模式
发现不同之处？现在，让我们来看看type attribute的states。实际上，如果我们检查记账详细信息部分，我们可以注意到在hidden state中，
valueIDL属性适用于此元素，并且处于模式
-而在所有其他(文本)状态中，模式是“值”。
TL;DR：
(仅限于)在<input type="hidden">元素上，设置value DOM属性(input.value = …、$input.val(…)、$input.prop("value", …))也会设置value属性，并使其可针对innerHTML/.html()进行序列化。
Stack Overflow用户
发布于 2013-01-21 22:01:56
这看起来确实像是jQuery中的一个bug。您可以使用attr()函数强制它返回：
$cloned_text.find('input[name="name"]').attr('value', "SOMETHING");请参阅更新后的Fiddle
Stack Overflow用户
发布于 2013-01-21 22:02:38
html()函数将返回分配给元素的html。在本例中，您将为输入文本字段赋值。
尝尝这个
$cloned_text.find('input[name="name"]').attr('value', "SOMETHING");https://stackoverflow.com/questions/14440219
复制相似问题
腾讯云开发者
