1. casa
  2. Domanda e risposta
  3. jQuery html() in Firefox (utilizza .innerHTML) ignora le modifiche DOM

jQuery html() in Firefox (utilizza .innerHTML) ignora le modifiche DOM

2009-09-07 16 views
21

Sono davvero sorpreso di non aver avuto questo problema prima, ma sembra che chiamare la funzione jQueries .html() su un elemento ignori le modifiche nel DOM, cioè restituisce l'HTML nella fonte originale. IE non lo fa. jQueries .html() usa solo la proprietà innerHTML internamente.jQuery html() in Firefox (utilizza .innerHTML) ignora le modifiche DOM

È questo che dovrebbe accadere? Sono su Firefox 3.5.2. Ho un esempio qui sotto, dove non importa ciò che si modifica il valore della casella di testo in, innerHTML dell'elemento "contenitore" restituisce sempre solo il valore definito nel markup HTML. L'esempio non usa jQuery solo per renderlo più semplice (il risultato è lo stesso con jQuery).

Qualcuno ha un problema attorno al quale posso ottenere l'html di un contenitore nel suo stato attuale, ad esempio includendo eventuali modifiche al DOM in script?

<!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>

fonte

2009-09-07 JonoW

risposta

36

Firefox non aggiorna l'attributo di un oggetto DOM valuein base all'input dell'utente, solo la sua valueproprietà - abbastanza esiste un lavoro rapido

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 che rende .formhtml() fare automaticamente questo:

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

fonte

2009-09-07 11:39:17 gnarf

+0

vostro plugin funziona bene per tutti i controlli, ma non funziona per Textarea solo in FF: - (.... Hai cambia nulla per farlo funzionare ? Ho già aggiunto 1 poiché questo mi ha aiutato molto :-) – Raja

+1

Bastava fare una piccola modifica $ ("textarea", this) .each (function() { \t \t this.innerHTML = this.value; \t }); e ora funziona. Grazie per la soluzione :-) – Raja

+0

@Raja - Grazie per il feedback - ha aggiornato il codice! – gnarf

1

so che la tua domanda riguarda innerHTML, ma se fosse solo il valore di textbox all'interno container che si necessario, quindi

$('#textbox').val()

fornirà il valore corretto (aggiornato) della casella di testo.

fonte

2009-09-07 12:10:51

2

Grazie per il plug-in formhtml. poter utilizzare con textarea, ho dovuto aggiornarlo:

$("textarea", this).each(function() { 
    $(this).text($(this).val()); 
});

fonte

2010-11-27 18:58:26

+0

Ho usato la risposta di @ gnarf con questa regolazione per mantenere tutti gli spazi bianchi in textarea (o abbastanza vicino ... $ this.text (this.value)) –

+0

Grazie, Vorrei che avessi suggerito una modifica qui! Ho cambiato la mia risposta per incorporare questo. – gnarf

0

Anche un altro approccio DOM è impostare il defaultValue sull'elemento specifico - prestito stesso codice dalla risposta ritenute.

function DisplayTextBoxValue(){ 
    var element = document.getElementById('textbox'); 
    element.defaultValue = element.value;  
    alert(document.getElementById("container").innerHTML);    
    return false; 
}

Che dovrebbe stampare il innerHTML aggiornato.

La soluzione di jQuery è migliore in quanto si collega a tutti gli elementi di input anziché a un elemento specifico. Questo può essere fatto usando anche "DOM only", coinvolgerà l'iterazione del DOM per rilevare tutti gli elementi di input e aggiungere le chiamate al metodo onChange su tutti gli elementi di input. Nel caso in cui non si conoscono i campi che si trovano sulla pagina.

fonte

2011-04-07 10:01:27 Swaroop

0

Questa funzione di aggiornamento funzionava solo su campi di input non modificati manualmente. Aggiunto la linea indicata per aggiornare il testo di input visibile:

// set text input value from the associated sel dropdown and reset dropdown 
    function set_input_value(eid, sel) { 
     var el = document.getElementById(eid); 
     el.setAttribute("value", sel.options[sel.selectedIndex].text); 

     // added this line to solve the issue: 
     el.value = el.getAttribute('value'); 

     sel.selectedIndex=0; 
    }

fonte

2013-04-01 22:46:45 Madalin

Problemi correlati

 Problemi correlati