當輸入值發生變化時，html（）方法錯誤

本質上，我有一些代碼需要在其輸入元素的任何輸入元素模糊時獲取父元素的HTML。這很簡單。問題是在父元素上調用html()時返回的HTML不反映其中包含的輸入元素的當前值。也就是說，在Firefox或Chrome中。它適用於所有地方的IE。當輸入值發生變化時，html（）方法錯誤

這裏的的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\[email protected]" + $.now()); 
          $("#childsValue").val($("#child").val() + "\r\[email protected]" + $.now()); 
         });

來源

2012-08-07 Grinn

更改屬性不會更改HTML源。無論如何，你試圖完成什麼？ – dqhendricks 2012-08-07 20:35:17

我認爲值得指出的是，如果您在瀏覽器工具中檢查元素，也會發生同樣的情況。 Chrome工具仍在HTML_中報告「世界」值，即使值本身已更改。 – Mathletics 2012-08-07 20:35:44

根據我的經驗，通過'.html（）操縱DOM很少是做事的最佳方式。 – Blazemonger 2012-08-07 20:39:16

的HTML value=""屬性不反映.value DOM屬性（unintuitively），但它反映.defaultValue DOM屬性。 .value屬性未被序列化爲HTML，但是.defaultValue是。用戶輸入變化.value，而不是.defaultValue。

.value只反映.defaultValue當輸入的dirty value flag is false

這裏有一個解決辦法，其中也包括選擇框的例子：http://jsfiddle.net/8PJMx/20/

來源

2012-08-07 20:35:19 Esailija

你正在與這些。 – 2012-08-07 22:20:01

對於那些遇到同樣的問題，但選擇（下拉），我已經更新Esailija的例子，包括那些。也許有一個更好的解決方案，但這個訣竅：http://jsfiddle.net/8PJMx/19/ – Grinn 2012-08-08 13:42:05

@Grinn實際上完全相同的原則適用於這裏，只需'.selected'和'.defaultSelected'：http： //jsfiddle.net/8PJMx/20/如果你想知道收音機和複選框，'.checked'和'.defaultChecked' – Esailija 2012-08-08 13:47:17

當輸入值發生變化時，html（）方法錯誤

回答

相關問題