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.

 DOM:

opened_dcf8ba67-46ab-42d4-923e-51f7c5ba3bb3" onclick="cnblogs_code_hide('dcf8ba67-46ab-42d4-923e-51f7c5ba3bb3',event)" style="display:none"> 代码

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

 

 

 

转帖：http://stackoverflow.com/questions/1388893/jquery-html-in-firefox-uses-innerhtml-ignores-dom-changes