jQuery html() in Firefox (verwendet .innerHTML) ignoriert DOM - Änderungen

Ich bin wirklich überrascht Ich habe dieses Problem noch nicht kennengelernt, aber es scheint, dass das Aufrufen von jQueries .html() - Funktion auf einem Element Änderungen ignoriert DOM, dh es gibt das HTML in der Originalquelle zurück. IE tut das nicht. jQueries .html() verwendet intern nur die Eigenschaft innerHTML.jQuery html() in Firefox (verwendet .innerHTML) ignoriert DOM - Änderungen

Ist dies geschehen soll? Ich bin auf Firefox 3.5.2. Ich habe eine Probe unten, wo, egal was Sie das Textfeld Wert ändern, die innerHTML- des „Container“ Element immer nur den Wert in der HTML-Markup definiert zurückgibt. Das Beispiel verwendet jQuery nicht nur, um es einfacher zu machen (das Ergebnis ist dasselbe mit jQuery).

Hat jemand eine Arbeit um, wo ich das HTML eines Containers in seinem aktuellen Zustand, d. H. Einschließlich skriptgesteuerter Änderungen an das DOM bekommen kann?

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

Quelle

2009-09-07 JonoW

Firefox nicht das valueAttribut ein DOM-Objekt basierend auf Benutzereingaben, nur seine valueEigenschaft aktualisieren:

Eine Diskussion zu diesem Thema finden Sie hier schnelle Arbeit existiert.

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, das diese .formhtml() automatisch tun macht:

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

Quelle

2009-09-07 11:39:17 gnarf

Ihr Plugin funktioniert für alle Bedienelemente gut, aber es funktioniert nicht für Textarea allein in FF: - (.... Hast du etwas ändern, damit es funktioniert Ich habe bereits 1 hinzugefügt, da dies mir sehr geholfen hat :-) – Raja

musste nur eine subtile Änderung vornehmen $ ("textarea", das) .each (function() { \t \t this.innerHTML = dieser.Wert; \t }); und jetzt funktioniert es. Danke für deine Lösung :-) – Raja

@Raja - Danke für die Rückmeldung - den Code aktualisiert! – gnarf

Dies ist ein bekanntes "Problem" in Firefox. Die Spezifikationen für innerHTML sind nicht vollständig klar, so dass verschiedene Browser-Anbieter es auf andere Weise implementieren. hübsch -

http://forums.mozillazine.org/viewtopic.php?t=317838#1744233

Quelle

2009-09-07 11:36:01

Ich weiß, Ihre Frage zu innerHTML bezieht, aber wenn es nur der Wert von textbox innerhalb container, dass Sie benötigt, dann

$('#textbox').val()

gibt den korrekten (aktualisierten) Textfeldwert an.

Quelle

2009-09-07 12:10:51

Vielen Dank für Ihre formhtml Plugin. Um es mit textarea zu verwenden, hatte ich es zu aktualisieren:

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

Quelle

2010-11-27 18:58:26

Ich habe @ gnarf's Antwort mit dieser Anpassung verwendet, um alle Leerzeichen in textarea zu behalten (oder nahe genug ... $ this.text (this.value)) –

Danke, Wünschte, du hättest hier eine Bearbeitung vorgeschlagen! Ich habe meine Antwort geändert, um dies zu berücksichtigen. – gnarf

Auch eine andere DOM-Ansatz die defaultValue auf dem spezifischen Element zu setzen ist - den gleichen Code aus der Abstimmung Antwort borgen.

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

Das sollte die aktualisierte innerHTML drucken.

Die Lösung von jQuery ist besser, da sie an alle Eingabeelemente anstatt an ein bestimmtes Element angehängt wird. Dies kann mit „DOM nur“ zu erfolgen, Iterieren der DOM beinhalten werden alle Eingabeelemente zu erkennen und das Hinzufügen der onChange Methode ruft alle Eingabeelemente. Falls Sie die Felder auf der Seite nicht kennen.

Quelle

2011-04-07 10:01:27 Swaroop

Diese Update-Funktion funktioniert nur auf Eingabefeldern nicht von Hand geändert. Added die angezeigte Linie des sichtbaren Eingabetext zu aktualisieren:

// 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; 
    }

Quelle

2013-04-01 22:46:45 Madalin

jQuery html() in Firefox (verwendet .innerHTML) ignoriert DOM - Änderungen

Antwort

Verwandte Themen