我真的很惊讶,我之前从未遇到过这个问题,但是似乎在元素上调用jQueries .html()函数会忽略DOM中的更改,即它会返回原始源中的HTML。IE不会这样做。jQueries .html()仅在内部使用innerHTML属性。
这是要发生吗?我使用的是Firefox 3.5.2。我在下面有一个示例,无论您将文本框的值更改为什么,“ container”元素的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>
Firefox不会根据用户输入来更新DOM对象的value 属性 ,而只是基于其value 属性 -存在非常快速的解决方法。
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; }
.formhtml()自动执行此操作的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);