metodo html() sbagliato quando il valore di input è stato modificato

In sostanza, ho un codice che deve ottenere l'HTML di un elemento padre quando uno dei suoi elementi di input viene sfocato. È piuttosto semplice. Il problema è che l'HTML restituito quando si chiama html() sull'elemento padre, non riflette il valore corrente degli elementi di input contenuti all'interno. Cioè, in Firefox o Chrome. Funziona in IE di tutti i posti.metodo html() sbagliato quando il valore di input è stato modificato

Ecco il JSFiddle: http://jsfiddle.net/8PJMx/15/

Prova a cambiare "mondo" nella casella di testo per "tutti" e facendo clic sul pulsante. Nota che aggiungo anche $.now() in modo che tu possa vedere che il codice è in effetti in esecuzione.

Come si può vedere, $("#parent").html() non si aggiorna, anche se lo fa $("#child").val(). Per il vostro piacere di osservazione, ecco il codice HTML:

<div id="parent">Hello <input type='text' id="child" value='world' /></div> 
<button id="separateEvent">Get HTML.</button> 
<br> 
<p>The HTML for #parent is:</p> 
<textarea id="parentsHtml" style="width:95%; height: 100px;"></textarea> 
<p>The value of #child is:</p> 
<textarea id="childsValue" style="width:95%; height: 100px;"></textarea>

... ed ecco il JavaScript:

$("#separateEvent").click(function() 
         { 
          $("#parentsHtml").val($("#parent").html() + "\r\[email protected]" + $.now()); 
          $("#childsValue").val($("#child").val() + "\r\[email protected]" + $.now()); 
         });

fonte

2012-08-07 Grinn

modificando le proprietà non cambia il sorgente HTML. cosa stai cercando di realizzare con questo comunque? – dqhendricks

Penso che valga la pena sottolineare che la stessa cosa accade se si ispeziona l'elemento negli strumenti del browser. Gli strumenti di Chrome riportano ancora un valore di "mondo" _in HTML_, anche se il valore stesso è cambiato. – Mathletics

Nella mia esperienza, manipolare il DOM tramite '.html()' è raramente il modo migliore di fare le cose. – Blazemonger

l'attributo HTML value="" non riflette la proprietà .value DOM (unintuitively), ma riflette la proprietà DOM .defaultValue. La proprietà .value non è serializzata su HTML, ma è .defaultValue.

Modifiche apportate dall'utente .value, non .defaultValue.

.value riflette solo .defaultValue quando il dirty value flag is false

ingresso Ecco una soluzione alternativa, che comprende anche un esempio per le caselle SELEZIONE: http://jsfiddle.net/8PJMx/20/

fonte

2012-08-07 20:35:19 Esailija

Stai facendo il pieno con questi. –

Per quelli di voi che hanno riscontrato lo stesso problema ma con selezioni (elenchi a discesa), ho aggiornato l'esempio di Esailija per includerli. Forse c'è una soluzione migliore, ma questa è la soluzione: http://jsfiddle.net/8PJMx/19/ – Grinn

@Grinn in realtà gli stessi principi si applicano qui, solo con '.selected' e' .defaultSelected': http: //jsfiddle.net/8PJMx/20/ E nel caso ti stia chiedendo di radio e caselle di controllo, '.checked' e' .defaultChecked' – Esailija

metodo html() sbagliato quando il valore di input è stato modificato

risposta

Problemi correlati