Firefox 中的 jQuery html()(使用 .innerHTML)忽略 DOM 更改 [英] jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

查看：27
本文介绍了Firefox 中的 jQuery html()(使用 .innerHTML)忽略 DOM 更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我真的很惊讶我以前没有遇到过这个问题，但似乎在元素上调用 jQueries .html() 函数会忽略 DOM 中的更改，即它返回原始源中的 HTML.IE 不这样做.jQueries .html() 只是在内部使用了innerHTML 属性.

这是注定的吗?我使用的是 Firefox 3.5.2.我在下面有一个示例，无论您将文本框值更改为什么，容器"元素的 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" ><头><script type="text/javascript"><!--函数体加载(){document.getElementById("textbox").value = "initial UPDATE";DisplayTextBoxValue();}函数 DisplayTextBoxValue(){警报(document.getElementById(容器").innerHTML)；返回假；}//--><body onload="BodyLoad();"><div id="容器"><input type="text" id="textbox" value="initial"/>

<input type="button" id="button" value="Test me" onclick="return DisplayTextBoxValue();"/>

解决方案

Firefox 不会根据用户输入更新 DOM 对象的 value 属性，只会更新它的value property - 存在非常快速的解决方法.

DOM:

function DisplayTextBoxValue(){var element = document.getElementById('textbox');//手动设置 DOM 元素上的属性 - 将更新 innerHTMLelement.setAttribute('value', element.value);警报(document.getElementById(容器").innerHTML)；返回假；}

使 .formhtml() 自动执行此操作的 jQuery 插件:

(function($) {var oldHTML = $.fn.html;$.fn.formhtml = function() {if (arguments.length) 返回 oldHTML.apply(this,arguments);$("input,button", this).each(function() {this.setAttribute('value',this.value);});$("textarea", this).each(function() {//更新 - 感谢 Raja &弗雷德博士！$(this).text(this.value);});$("input:radio,input:checkbox", this).each(function() {//我什至不确定您是否需要为已检查"执行此操作//但到底是什么，安全总比抱歉好if (this.checked) this.setAttribute('checked', 'checked');否则 this.removeAttribute('checked');});$("option", this).each(function() {//也不确定，但是，更安全...if (this.selected) this.setAttribute('selected', 'selected');否则 this.removeAttribute('selected');});返回 oldHTML.apply(this);};//如果需要，可以选择覆盖真正的 .html()//$.fn.html = $.fn.formhtml;})(jQuery);

I'm really suprised I haven't run into this problem before, but it seems that calling jQueries .html() function on an element ignores changes in the DOM, i.e it returns the HTML in the original source. IE doesn't do this. jQueries .html() just uses the innerHTML property internally.

Is this meant to happen? I'm on Firefox 3.5.2. I have a sample below, where no matter what you change the textbox value to, the innerHTML of the "container" element only ever returns the value defined in the HTML markup. The sample isn't using jQuery just to make it simpler (the result is the same using jQuery).

Does anyone have a work around where I can get the html of a container in its current state, i.e. including any scripted changes to the 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 doesn't update the value attribute of a DOM object based on user input, just its value property - pretty quick work around exists.

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 plugin that makes .formhtml() automatically do this:

(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);

这篇关于Firefox 中的 jQuery html()(使用 .innerHTML)忽略 DOM 更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆