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

Ich bin wirklich überrascht, ich habe nicht dieses problem, aber es scheint, dass der Aufruf jQueries .html () - Funktion auf ein element ignoriert änderungen in den DOM, ich.e es gibt den HTML-Code in der ursprünglichen Quelle. IE macht dies nicht. jQueries .html() benutzt nur die innerHTML-Eigenschaft intern.

Soll das geschehen? Ich bin auf Firefox 3.5.2. Ich habe ein Beispiel unten, wo, egal was Sie ändern das textbox-Wert der innerHTML-der "container" - element nur immer wieder die definierten Wert in das HTML-markup. Die Probe ist nicht mit jQuery nur um es einfacher zu machen (das Ergebnis ist das gleiche mit jQuery).

Hat jemand eine Arbeit um, wo kann ich den html-container in seinem aktuellen Zustand, D. H. einschließlich aller scripted änderungen an der DOM?

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

InformationsquelleAutor der Frage JonoW | 2009-09-07

  1. 36

    Firefox nicht aktualisieren value Attribut ein DOM-Objekt auf Basis user-input, sondern nur seine value Eigenschaft - ziemlich schnell umgehen, 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, dass macht .formhtml() erfolgt dies automatisch:

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

    InformationsquelleAutor der Antwort gnarf

  2. 5

    Dies ist ein bekanntes "Problem" in Firefox. Die Spezifikationen für die innerHTML-sind nicht völlig klar, so dass andere browser-Hersteller implementieren es in einer anderen Weise.

    Einer Diskussion über dieses Thema kann hier gefunden werden:

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

    InformationsquelleAutor der Antwort Philippe Leybaert

  3. 2

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

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

    InformationsquelleAutor der Antwort Dr Fred

  4. 1

    Ich weiß, Ihre Frage bezieht sich auf innerHTMLaber wenn es nur der Wert von textbox innen container dass Sie gebraucht werden, dann

    $('#textbox').val()

    geben das richtige (aktualisierte) textbox Wert.

    InformationsquelleAutor der Antwort Russ Cam

  5. 0

    Auch anderen DOM-Ansatz ist das einrichten der defaultValue auf das jeweilige element, das - in Anlehnung an den gleichen code aus der Antwort gestimmt.

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

    Sollte drucken Sie die innerHTML aktualisiert.

    jQuery-Lösung ist besser, da es misst, um alle input-Elemente, anstelle von einem bestimmten element. Diese kann getan werden, mit "DOM " nur" zu, umfassen Durchlaufen der DOM zu erkennen, alle input-Elemente und das hinzufügen der onChange Methode fordert alle input-Elemente. Falls Sie nicht wissen, die Felder, das wäre auf hte Seite.

    InformationsquelleAutor der Antwort Swaroop

  6. 0

    Diesem update wurde die Funktion funktioniert nur auf Eingabe-Felder nicht von hand verändert.
    Addiert die angegebene Zeile zum aktualisieren der sichtbaren Eingabe von text:

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

    InformationsquelleAutor der Antwort Madalin

Schreibe einen Kommentar