当前位置:编程学习 > JS >>

jquery html()方法在firefox中无法获取到dom改变

故增加一个方法,代码如下:当然,可以直接用此方法代替html()方法

jquery的html()方法很容易实现。但是测试的时候发现,在ie8和i火狐(还包括ie9,safari,谷歌浏览器)中,html()得到的值是不一样的

 代码如下 复制代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script>
function save(){
     var content = $("#mytable").html();
    alert(content);
}
</script>
</head>

<body>
<table width="100"  border="0" cellpadding="0" cellspacing="0"  id="mytable">
<tbody>
  <tr>
    <td><input type="text" name="textfield"></td>
  </tr>
  <tr>
    <td><input type="button" name="Submit" value="保存" onClick="save()"></td>
    </tr>
</tbody>
</table>
</body>
</html>

效果如下

点击按钮以后的结果如下(注意我画框的地方):

ie8

ie9,火狐

 

也就是说,FF下获得的HTML只有最原始的代码,不包括动态插入的内容。这样就很纠结,我不希望这样。

至于为什么会这样,也许是火狐等浏览器的限制?我真的不知道,有待研究,哪位大侠能告诉我,感激不尽。

现在我只能尽快想办法解决这个问题,完成工作要求

解决办法

 代码如下 复制代码

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Firefox doesn’t update the value attribute of a DOM object based on user input, just its valueproperty - pretty quick work around exists.

(function($) {
var oldHTML = $.fn.html;

$.fn.formhtml = function() {
if (arguments.length) return oldHTML.apply(this,arguments);
$(“input,textarea,button”, this).each(function() {
this.setAttribute(‘value’,this.value);
});
$(“:radio,: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);

补充:网页制作,jquery 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,