为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

吃鸡游戏 2019-10-21 10:41:27
我真的很惊讶,我之前从未遇到过此问题,但是似乎在元素上调用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>
查看完整描述

3 回答

?
小唯快跑啊

TA贡献1863条经验 获得超2个赞

Firefox没有更新的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;

}

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


查看完整回答
反对 回复 2019-10-21
?
长风秋雁

TA贡献1757条经验 获得超7个赞

感谢您的formhtml插件。为了配合使用textarea,我必须对其进行更新:


$("textarea", this).each(function() { 

  $(this).text($(this).val()); 

});


查看完整回答
反对 回复 2019-10-21
  • 3 回答
  • 0 关注
  • 497 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信