jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

196 阅读 0 评论 130 点赞

我是靠谱客的博主深情向日葵，最近开发中收集的这篇文章主要介绍jQuery html() in Firefox (uses .innerHTML) ignores DOM changes，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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