输入值更改时,html()方法错误

Question

本质上,我有一些代码需要在任何输入元素模糊时获取父元素的HTML.这很简单.问题是调用html()父元素时返回的HTML 不反映其中包含的输入元素的当前值.也就是说,在Firefox或Chrome中.它适用于所有地方的IE浏览器.

这是JSFiddle:http://jsfiddle.net/8PJMx/15/

尝试将文本框中的"世界"更改为"所有人",然后单击按钮.请注意,我还要附加,$.now()以便您可以看到代码实际上正在执行.

如您所见$("#parent").html(),即使有,也不会更新$("#child").val().为了您的观赏乐趣,这是HTML:

<div id="parent">Hello <input type='text' id="child" value='world' /></div>
<button id="separateEvent">Get HTML.</button>
<br>
<p>The HTML for #parent is:</p>
<textarea id="parentsHtml" style="width:95%; height: 100px;"></textarea>
<p>The value of #child is:</p>
<textarea id="childsValue" style="width:95%; height: 100px;"></textarea>

......这是JavaScript:

$("#separateEvent").click(function ()
                         {
                             $("#parentsHtml").val($("#parent").html() + "\r\n@" + $.now());
                             $("#childsValue").val($("#child").val() + "\r\n@" + $.now());
                         });

Answer 1

html value=""属性不反映.valueDOM属性(不直观),但它反映了.defaultValueDOM属性.该.value属性未序列化为HTML,但是.defaultValue.

用户输入更改.value,而不是.defaultValue.

.value仅反映.defaultValue输入的脏值标志为false时

这是一个解决方法,其中还包括SELECT框的示例:http://jsfiddle.net/8PJMx/20/