猿问

Firefox中的jQuery html()(使用.innerHTML)忽略DOM更改

我真的很惊讶,我之前从未遇到过此问题,但是似乎在元素上调用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>


吃鸡游戏
浏览 529回答 3
3回答

小唯快跑啊

Firefox没有更新的value 属性基于用户输入DOM对象的,只是它的value 性能 -相当快,工作的周边存在。DOM:function DisplayTextBoxValue(){&nbsp; var element = document.getElementById('textbox');&nbsp; // set the attribute on the DOM Element by hand - will update the innerHTML&nbsp; element.setAttribute('value', element.value);&nbsp; alert(document.getElementById("container").innerHTML);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; return false;}.formhtml()自动执行此操作的jQuery插件:(function($) {&nbsp; var oldHTML = $.fn.html;&nbsp; $.fn.formhtml = function() {&nbsp; &nbsp; if (arguments.length) return oldHTML.apply(this,arguments);&nbsp; &nbsp; $("input,button", this).each(function() {&nbsp; &nbsp; &nbsp; this.setAttribute('value',this.value);&nbsp; &nbsp; });&nbsp; &nbsp; $("textarea", this).each(function() {&nbsp; &nbsp; &nbsp; // updated - thanks Raja & Dr. Fred!&nbsp; &nbsp; &nbsp; $(this).text(this.value);&nbsp; &nbsp; });&nbsp; &nbsp; $("input:radio,input:checkbox", this).each(function() {&nbsp; &nbsp; &nbsp; // im not really even sure you need to do this for "checked"&nbsp; &nbsp; &nbsp; // but what the heck, better safe than sorry&nbsp; &nbsp; &nbsp; if (this.checked) this.setAttribute('checked', 'checked');&nbsp; &nbsp; &nbsp; else this.removeAttribute('checked');&nbsp; &nbsp; });&nbsp; &nbsp; $("option", this).each(function() {&nbsp; &nbsp; &nbsp; // also not sure, but, better safe...&nbsp; &nbsp; &nbsp; if (this.selected) this.setAttribute('selected', 'selected');&nbsp; &nbsp; &nbsp; else this.removeAttribute('selected');&nbsp; &nbsp; });&nbsp; &nbsp; return oldHTML.apply(this);&nbsp; };&nbsp; //optional to override real .html() if you want&nbsp; // $.fn.html = $.fn.formhtml;})(jQuery);

长风秋雁

感谢您的formhtml插件。为了配合使用textarea,我必须对其进行更新:$("textarea", this).each(function() {&nbsp;&nbsp; $(this).text($(this).val());&nbsp;});
随时随地看视频慕课网APP
我要回答