Firefox中的jQuery html（）（使用.innerHTML）忽略DOM更改

一尘不染

Firefox中的jQuery html（）（使用.innerHTML）忽略DOM更改

html

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

阅读 263

2020-05-10

共1个答案

一尘不染

Firefox不会根据用户输入来更新DOM对象的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插件：

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

2020-05-10