jQuery的HTML（）在Firefox（使用.innerHTML）忽略DOM改變

我真的很驚訝，我以前沒有碰到這個問題，但似乎調用jQueries的.html（）一個元素函數忽略的變化DOM，即它返回原始源代碼中的HTML。 IE不會這樣做。 jQueries .html（）只是在內部使用innerHTML屬性。jQuery的HTML（）在Firefox（使用.innerHTML）忽略DOM改變

這是否意味着發生的呢？我在Firefox 3.5.2上。我在下面有一個示例，無論您將textbox值更改爲什麼，「容器」元素的innerHTML都只返回HTML標記中定義的值。該示例並未使用jQuery來簡化它（使用jQuery的結果相同）。

有誰有大約在那裏我可以得到一個容器的HTML在當前狀態下，即包括任何腳本更改DOM工作？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head> 
     <script type="text/javascript"> 
      <!-- 
      function BodyLoad(){     
       document.getElementById("textbox").value = "initial UPDATE"; 
       DisplayTextBoxValue(); 
      } 

      function DisplayTextBoxValue(){ 
       alert(document.getElementById("container").innerHTML);    
       return false; 
      } 
      //--> 
     </script> 
    </head> 
    <body onload="BodyLoad();"> 
     <div id="container"> 
      <input type="text" id="textbox" value="initial" /> 
     </div> 
     <input type="button" id="button" value="Test me" onclick="return DisplayTextBoxValue();" /> 
    </body> 
</html>

來源

2009-09-07 JonoW

火狐根據用戶的輸入，只是其value財產不更新DOM對象的value屬性 - 漂亮快速工作存在。

DOM：

function DisplayTextBoxValue(){ 
    var element = document.getElementById('textbox'); 
    // set the attribute on the DOM Element by hand - will update the innerHTML 
    element.setAttribute('value', element.value); 
    alert(document.getElementById("container").innerHTML);    
    return false; 
}

jQuery插件，使.formhtml()自動執行此操作：

(function($) { 
    var oldHTML = $.fn.html; 

    $.fn.formhtml = function() { 
    if (arguments.length) return oldHTML.apply(this,arguments); 
    $("input,button", this).each(function() { 
     this.setAttribute('value',this.value); 
    }); 
    $("textarea", this).each(function() { 
     // updated - thanks Raja & Dr. Fred! 
     $(this).text(this.value); 
    }); 
    $("input:radio,input:checkbox", this).each(function() { 
     // im not really even sure you need to do this for "checked" 
     // but what the heck, better safe than sorry 
     if (this.checked) this.setAttribute('checked', 'checked'); 
     else this.removeAttribute('checked'); 
    }); 
    $("option", this).each(function() { 
     // also not sure, but, better safe... 
     if (this.selected) this.setAttribute('selected', 'selected'); 
     else this.removeAttribute('selected'); 
    }); 
    return oldHTML.apply(this); 
    }; 

    //optional to override real .html() if you want 
    // $.fn.html = $.fn.formhtml; 
})(jQuery);

來源

2009-09-07 11:39:17 gnarf

你的插件工作正常，所有的控制，但它並不適用於textarea的FF單獨工作： - （......你有沒有改變任何東西，使其工作？已經添加了1，因爲這對我幫助很大:-) – Raja 2011-02-28 16:58:25

只是不得不做了微妙的變化$（「textarea的」，這一點）。每個（函數（）{ \t \t this.innerHTML = THIS.VALUE; \t }）;現在它可以工作。感謝您的解答:-) – Raja 2011-02-28 17:31:40

@Raja - 感謝您的反饋 - 更新了代碼！ – gnarf 2011-02-28 18:55:07

這是Firefox中一個已知的「問題」。 innerHTML的規範並不完全清楚，因此不同的瀏覽器供應商以不同的方式實現它。

關於這個話題的討論可以在這裏找到：

http://forums.mozillazine.org/viewtopic.php?t=317838#1744233

來源

2009-09-07 11:36:01

我知道你的問題涉及到innerHTML，但如果它裏面container的textbox只值你需要的話

$('#textbox').val()

將提供正確的（更新的）文本框值。

來源

2009-09-07 12:10:51

感謝您的formhtml插件。爲了與textarea使用它，我不得不更新：

$("textarea", this).each(function() { 
    $(this).text($(this).val()); 
});

來源

2010-11-27 18:58:26

我用這個調整@ gnarf的答案保留textarea中的所有空格（或足夠接近... $ this.text（this.value）） – 2012-11-19 20:42:27

謝謝，希望你會在這裏建議編輯！我改變了我的答案，以納入這一點。 – gnarf 2012-11-20 18:41:30

也是另一個DOM方法是設置defaultValue特定元素上 - 從投答案借用相同的代碼。

function DisplayTextBoxValue(){ 
    var element = document.getElementById('textbox'); 
    element.defaultValue = element.value;  
    alert(document.getElementById("container").innerHTML);    
    return false; 
}

這應該打印更新的innerHTML。

jQuery的方案爲它附加到所有的輸入元件，而不是一個特定的元素更好。這也可以通過使用「DOM only」來完成，包括迭代DOM來檢測所有輸入元素，並在所有輸入元素上添加方法調用。如果你不知道在頁面上的字段。

來源

2011-04-07 10:01:27 Swaroop

此更新功能是在不改變手工輸入字段唯一的工作。添加指定的行更新可見輸入文本：

// set text input value from the associated sel dropdown and reset dropdown 
    function set_input_value(eid, sel) { 
     var el = document.getElementById(eid); 
     el.setAttribute("value", sel.options[sel.selectedIndex].text); 

     // added this line to solve the issue: 
     el.value = el.getAttribute('value'); 

     sel.selectedIndex=0; 
    }

來源

2013-04-01 22:46:45 Madalin

jQuery的HTML（）在Firefox（使用.innerHTML）忽略DOM改變

回答

相關問題