blocks|key|386647|text|这看起来确实像是jQuery中的一个bug。您可以使用attr()函数强制它返回：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|386648|$cloned_text.find('input[name="name"]').attr('value',+"SOMETHING");|code-block|syntax|javascript|386649|请参阅更新后的Fiddle|386650|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/xRjPm/2/^0|R|6|0|0|7|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

That certainly looks like a bug in jQuery. You can force it to return by using the <code>attr()</code> function:

<pre><code>$cloned_text.find('input[name="name"]').attr('value', "SOMETHING");
</code></pre>

See the updated <a href="http://jsfiddle.net/xRjPm/2/" rel="nofollow">Fiddle</a>

blocks|key|4594943|text|html()函数将返回分配给元素的html。在本例中，您将为输入文本字段赋值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4594944|尝尝这个|4594945|$cloned_text.find('input[name="name"]').attr('value',+"SOMETHING");|code-block|syntax|javascript|4594946|entityMap^0|0|6|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

The <code>html()</code> function will return the html assign to the element. In your case you are assigning value to input text field. 

Try this

<pre><code>$cloned_text.find('input[name="name"]').attr('value', "SOMETHING");
</code></pre>

blocks|key|385809|text|解决此问题的一个好办法是使用attr()函数而不是val()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|385810|因此，不是|385811|$cloned_text.find('input[name="name"]').val("SOMETHING");|code-block|syntax|javascript|385812|写|385813|$cloned_text.find('input[name="name"]').attr("value",+"SOMETHING");|385814|entityMap^0|E|6|P|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

A good workaround for this problem would be to use the <code>attr()</code> function instead of the <code>val()</code>.

So, instead of

<pre><code>$cloned_text.find('input[name="name"]').val("SOMETHING");
</code></pre>

Write

<pre><code>$cloned_text.find('input[name="name"]').attr("value", "SOMETHING");
</code></pre>

blocks|key|386684|text|这不是jQuery的bug。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|386685|正如您在jQuery+source+code+for+the+val+method中看到的，它们只是设置input元素的value，这与向元素添加新属性是不同的(最后，这会导致value属性更改)。|offset|length|style|CODE|386686|jQuery源(在此上下文中，hooks为空)：|386687|if+(+!hooks+%7C%7C+!("set"+in+hooks)+%7C%7C+hooks.set(+this,+val,+"value"+)+===+undefined+)+{
++++this.value+=+val;
}|code-block|syntax|javascript|386688|因此，要获得什么，您必须向元素添加一个新的val属性，使用|386689|.attr('value',+"SOMETHING");|386690|正如其他人提到的那样。|386691|通过使用.attr，新属性将被添加到元素中，并且.html将以字符串形式返回该属性。|386692|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jquery/jquery/blob/master/src/attributes.js#L220^0|0|V|3|1G|5|1O|5|2G|5|4|11|0|0|F|5|0|0|L|3|0|0|0|4|5|O|5|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]|$D|18|E|19|F|G]|$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]]|9|@$D|1E|E|1F|1|1G]]|A|$]]|$1|H|3|I|5|6|7|1H|8|@$D|1I|E|1J|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1K|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1L|8|@$D|1M|E|1N|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1O|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1P|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1Q|8|@$D|1R|E|1S|F|G]|$D|1T|E|1U|F|G]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

It's not a jQuery bug.

As you can see in <a href="https://github.com/jquery/jquery/blob/master/src/attributes.js#L220" rel="nofollow">jQuery source code for the <code>val</code> method</a>, they're just setting the <code>value</code> of the <code>input</code> element, which is a different thing from adding a new attribute to the element (which at the end, results in the <code>value</code> property change).

jQuery source (<code>hooks</code> is null in this context):

<pre><code>if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
 this.value = val;
}
</code></pre>

So, to get what you what, you have to add a new <code>val</code> attribute to the element, using

<pre><code>.attr('value', "SOMETHING");
</code></pre>

as others mentioned.

By using <code>.attr</code> the new attribute will be added to the element, and <code>.html</code> will return that as string.

blocks|key|1245624|text|这不是一个奇怪的jQuery行为，它是一个奇怪的DOM效果。jQuery.val()除了设置<input>元素的value属性外，什么也不做。我所说的“属性”指的是DOM属性，而不是节点属性--有关区别，请参阅.prop()+vs+.attr()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1245625|返回DOM的innerHTML序列化的.html()方法应该只显示元素的属性-它们的属性是无关的。这是默认行为，当您想序列化输入值时，需要显式地将它们设置为attributes+-+$input.attr("value",+$input.prop("value"))。|1245626|那么，为什么简单的val()要在隐藏的输入元素上工作呢？原因是HTML规范。还有reflecting+IDL+attributes，其中DOM属性与节点属性耦合，但value属性不是其中之一。然而，value+IDL+attribute有特殊的模式，在这些模式下它的反应是不同的。引用规范：|1245627|1245628|该属性处于定义其行为的以下模式之一：|blockquote|1245629|1245630|值|BOLD|1245631|在获取时，它必须返回元素的current+value。在设置时，它必须将element's+value设置为新值，设置元素的脏值…做很多其他的事情。默认|1245632|在获取时，如果元素具有value+attribute，则必须返回该属性的值；否则，必须返回空字符串。在设置时，它必须将元素的value+attribute设置为新值。"default/on“和"filename”模式|1245633|1245634|发现不同之处？现在，让我们来看看type+attribute的states。实际上，如果我们检查记账详细信息部分，我们可以注意到在hidden+state中，|1245635|1245636|+value+IDL属性适用于此元素，并且处于模式|1245637|1245638|1245639|-而在所有其他(文本)状态中，模式是“值”。|1245640|1245641|TL;DR：|1245642|(仅限于)在<input+type="hidden">元素上，设置value+DOM属性(input.value+=+…、$input.val(…)、$input.prop("value",+…))也会设置value属性，并使其可针对innerHTML/.html()进行序列化。|1245643|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/val/|1|https://stackoverflow.com/questions/5874652/prop-vs-attr|2|https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML|3|http://api.jquery.com/html/|4|http://www.w3.org/TR/html5/infrastructure.html#reflecting-content-attributes-in-idl-attributes|5|http://www.w3.org/TR/html5/forms.html#dom-input-value|6|http://www.w3.org/TR/html5/forms.html#concept-fe-value|7|8|http://www.w3.org/TR/html5/forms.html#attr-input-value|9|10|http://www.w3.org/TR/html5/forms.html#attr-input-type|11|http://www.w3.org/TR/html5/forms.html#states-of-the-type-attribute|12|http://www.w3.org/TR/html5/forms.html#hidden-state-(type=hidden))^0|U|C|1A|7|1K|5|U|C|0|2X|I|1|0|6|9|J|7|2J|16|6|9|2|J|7|3|0|9|5|2A|5|14|P|4|2R|J|5|0|0|0|0|0|1|0|22|2|D|D|6|10|F|7|0|B|F|8|1Q|F|9|0|0|1T|6|G|E|A|V|6|B|1T|C|C|0|0|1|5|0|0|0|0|0|0|6|L|X|5|19|F|1P|D|23|N|2V|5|39|9|3J|7|0^^$0|@$1|2|3|4|5|6|7|24|8|@$9|25|A|26|B|C]|$9|27|A|28|B|C]|$9|29|A|2A|B|C]]|D|@$9|2B|A|2C|1|2D]|$9|2E|A|2F|1|2G]]|E|$]]|$1|F|3|G|5|6|7|2H|8|@$9|2I|A|2J|B|C]|$9|2K|A|2L|B|C]|$9|2M|A|2N|B|C]]|D|@$9|2O|A|2P|1|2Q]|$9|2R|A|2S|1|2T]]|E|$]]|$1|H|3|I|5|6|7|2U|8|@$9|2V|A|2W|B|C]|$9|2X|A|2Y|B|C]]|D|@$9|2Z|A|30|1|31]|$9|32|A|33|1|34]]|E|$]]|$1|J|3|-4|5|6|7|35|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|36|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|37|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|38|8|@$9|39|A|3A|B|Q]]|D|@]|E|$]]|$1|R|3|S|5|6|7|3B|8|@$9|3C|A|3D|B|Q]]|D|@$9|3E|A|3F|1|3G]|$9|3H|A|3I|1|3J]]|E|$]]|$1|T|3|U|5|6|7|3K|8|@]|D|@$9|3L|A|3M|1|3N]|$9|3O|A|3P|1|3Q]]|E|$]]|$1|V|3|-4|5|6|7|3R|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|3S|8|@$9|3T|A|3U|B|C]]|D|@$9|3V|A|3W|1|3X]|$9|3Y|A|3Z|1|40]|$9|41|A|42|1|43]]|E|$]]|$1|Y|3|-4|5|6|7|44|8|@]|D|@]|E|$]]|$1|Z|3|10|5|M|7|45|8|@$9|46|A|47|B|C]]|D|@]|E|$]]|$1|11|3|-4|5|6|7|48|8|@]|D|@]|E|$]]|$1|12|3|-4|5|6|7|49|8|@]|D|@]|E|$]]|$1|13|3|14|5|6|7|4A|8|@]|D|@]|E|$]]|$1|15|3|-4|5|6|7|4B|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|4C|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|4D|8|@$9|4E|A|4F|B|C]|$9|4G|A|4H|B|C]|$9|4I|A|4J|B|C]|$9|4K|A|4L|B|C]|$9|4M|A|4N|B|C]|$9|4O|A|4P|B|C]|$9|4Q|A|4R|B|C]|$9|4S|A|4T|B|C]]|D|@]|E|$]]|$1|1A|3|-4|5|6|7|4U|8|@]|D|@]|E|$]]]|1B|$1C|$5|1D|1E|1F|E|$1G|1H]]|1I|$5|1D|1E|1F|E|$1G|1J]]|1K|$5|1D|1E|1F|E|$1G|1L]]|1M|$5|1D|1E|1F|E|$1G|1N]]|1O|$5|1D|1E|1F|E|$1G|1P]]|1Q|$5|1D|1E|1F|E|$1G|1R]]|1S|$5|1D|1E|1F|E|$1G|1T]]|1U|$5|1D|1E|1F|E|$1G|1T]]|1V|$5|1D|1E|1F|E|$1G|1W]]|1X|$5|1D|1E|1F|E|$1G|1W]]|1Y|$5|1D|1E|1F|E|$1G|1Z]]|20|$5|1D|1E|1F|E|$1G|21]]|22|$5|1D|1E|1F|E|$1G|23]]]]

This is not a strange jQuery behavior, its a strange DOM effect. <a href="http://api.jquery.com/val/" rel="nofollow noreferrer"><code>jQuery.val()</code></a> does nothing else than setting the <code>value</code> property of <code>&lt;input&gt;</code> element. By "property", I mean the DOM property and not the node attribute - see <a href="https://stackoverflow.com/questions/5874652/prop-vs-attr">.prop() vs .attr()</a> for the difference.

The <a href="http://api.jquery.com/html/" rel="nofollow noreferrer"><code>.html()</code></a> method, which returns the <a href="https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML" rel="nofollow noreferrer"><code>innerHTML</code></a> serialisation of the DOM, is expected to show only attributes of the elements - their properties are irrelevant. This is the default behaviour, and when you want input values serialized you need to explicitly set them as attributes - <code>$input.attr("value", $input.prop("value"))</code>.

So why did simple <code>val()</code> work on the hidden input elements? The reason is the HTML specification. There are <a href="http://www.w3.org/TR/html5/infrastructure.html#reflecting-content-attributes-in-idl-attributes" rel="nofollow noreferrer">reflecting IDL attributes</a>, where the DOM property is coupled with the node attribute, but the <code>value</code> attribute is none of those. Yet, the <a href="http://www.w3.org/TR/html5/forms.html#dom-input-value" rel="nofollow noreferrer">value IDL attribute</a> has special modes, in which it reacts differently. To cite the spec:

<blockquote>
 The attribute is in one of the following modes, which define its behavior:
 
 value
 
 <blockquote>
 On getting, it must return the <a href="http://www.w3.org/TR/html5/forms.html#concept-fe-value" rel="nofollow noreferrer">current value</a> of the element. On setting, it must set the <a href="http://www.w3.org/TR/html5/forms.html#concept-fe-value" rel="nofollow noreferrer">element's value</a> to the new value, set the element's dirty value [… and do a lot of other stuff].
 </blockquote>
 
 default
 
 <blockquote>
 On getting, if the element has a <a href="http://www.w3.org/TR/html5/forms.html#attr-input-value" rel="nofollow noreferrer">value attribute</a>, it must return that attribute's value; otherwise, it must return the empty string. On setting, it must set the element's <a href="http://www.w3.org/TR/html5/forms.html#attr-input-value" rel="nofollow noreferrer">value attribute</a> to the new value.
 </blockquote>
 
 ["default/on" and "filename" modes]
</blockquote>

Spot the difference? And now, let's have a look at the <a href="http://www.w3.org/TR/html5/forms.html#states-of-the-type-attribute" rel="nofollow noreferrer">states</a> of the <a href="http://www.w3.org/TR/html5/forms.html#attr-input-type" rel="nofollow noreferrer">type attribute</a>. And really, if we check the Bookkeeping details sections, we can notice that in the <a href="http://www.w3.org/TR/html5/forms.html#hidden-state-(type=hidden)" rel="nofollow noreferrer"><code>hidden</code> state</a>,

<blockquote>
 The <code>value</code> IDL attribute applies to this element and is in mode default
</blockquote>

&dash; while in all other (textual) states the mode is "value".

<hr>

<h2>TL;DR:</h2>

(Only) On <code>&lt;input type="hidden"&gt;</code> elements, setting the <code>value</code> DOM property (<code>input.value = …</code>, <code>$input.val(…)</code>, <code>$input.prop("value", …)</code>) also sets the <code>value</code> attribute and makes it serializable for <code>innerHTML</code>/<code>.html()</code>.

I have following html:

<pre><code>&lt;div class="copy_me_text"&gt;
 &lt;div&gt;
 &lt;input type="text" name="name" /&gt;
 &lt;input type="hidden" name="id" /&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;div class="copy_me_hidden"&gt;
 &lt;div&gt;
 &lt;input type="hidden" name="name" /&gt;
 &lt;input type="hidden" name="id" /&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

And following js code:

<pre><code>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());
</code></pre>

And output is strange for me:

<pre><code>&lt;div&gt;
 &lt;input name="name" type="text"&gt;
 &lt;input value="SOMETHING" name="id" type="hidden"&gt;
&lt;/div&gt;
&lt;div&gt;
 &lt;input value="SOMETHING" name="name" type="hidden"&gt;
 &lt;input value="SOMETHING" name="id" type="hidden"&gt;
&lt;/div&gt;
</code></pre>

I create also jsFiddle <a href="http://jsfiddle.net/xRjPm/1/">example</a>.
Is it correct behavior? I don't understand, why in <code>.html()</code> function, value of <code>input type="text"</code> is not returned.

jquery.html() strange behavior with form

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有以下html：<div class="copy_me_text"> <div> <input type="text" name="name" /> <input type="hidden" name="id" /> </div></div><div class="copy_m...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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