jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
更新時(shí)間：2010年03月05日 23:12:59 作者：
Firefox doesn't update the value attribute of a DOM object based on user input, just its valueproperty - 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,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);
復(fù)制代碼 代碼如下:
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:
復(fù)制代碼 代碼如下:
(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 append()方法與html()方法的區(qū)別及使用介紹
- jquery text(),val(),html()方法區(qū)別總結(jié)
- 『jQuery』.html(),.text()和.val()的概述及使用
- innerHTML與jquery里的html()區(qū)別介紹
- JQuery中html()方法使用不當(dāng)帶來的陷阱
- jQuery獲取文本節(jié)點(diǎn)之 text()/val()/html() 方法區(qū)別
- jquery 學(xué)習(xí)之二 屬性(html()與html(val))
- jquery 的 $("#id").html() 無內(nèi)容的解決方法
- jQuery html()等方法介紹
- jQuery html()方法使用不了無法顯示內(nèi)容的問題
相關(guān)文章
jQuery實(shí)現(xiàn)分隔條左右拖動(dòng)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)分隔條左右拖動(dòng)功能，需要的朋友可以參考下2015-11-11
基于jQuery實(shí)現(xiàn)仿百度首頁選項(xiàng)卡切換效果
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)仿百度首頁選項(xiàng)卡切換效果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
jQuery試卷自動(dòng)排版系統(tǒng)，需要的朋友可以參考下。2010-07-07
jQuery實(shí)現(xiàn)磁力圖片跟隨效果完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)磁力圖片跟隨效果,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及animate方法實(shí)現(xiàn)帶緩沖效果的圖片跟隨效果,需要的朋友可以參考下2016-09-09
基于jquery的動(dòng)態(tài)創(chuàng)建表格的插件
工作快一年了,最近學(xué)習(xí)jquery，對(duì)jquery很感興趣。第一次寫博客，有不足之處還請(qǐng)各位拍磚。2011-04-04
jquery對(duì)象和DOM對(duì)象的區(qū)別介紹
jquery對(duì)象和DOM對(duì)象在使用過程很頻繁，正是因?yàn)槿绱?，好多朋友都不知道它們之間有什么區(qū)別，下面為大家詳細(xì)介紹下，希望對(duì)大家有所幫助2013-08-08
這篇文章主要為大家詳細(xì)介紹了JQuery自定義模態(tài)框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
bind()定義和用法：bind() 方法向被選元素添加一個(gè)或多個(gè)事件處理程序，以及當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。2015-07-07
本文重點(diǎn)給大家介紹了jQuery中的2個(gè)函數(shù)hover和toggle的使用方法和示例，非常的簡單實(shí)用，推薦給小伙伴們參考下。2015-02-02
JQuery組件基于Bootstrap的DropDownList（完整版）
這篇文章主要介紹了JQuery組件基于Bootstrap的DropDownList的完整版，在原有基礎(chǔ)上進(jìn)行完善功能，感興趣的小伙伴們可以參考一下2016-07-07