Dynamisch modifiziert mit dem Wert von Eingang spiegelt sich nicht in den DOM

Wie bekomme ich den DOM zu reflektieren, die modifizierte input-Wert?

<div>
  <input value='0'>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>

<script>
setInterval(function() {
  $('input').val(parseInt($('input').val()) + 1)
  console.log('div.html(): ', $('div').html())
}, 1000)
</script>
InformationsquelleAutor Jesse Aldridge | 2011-04-17
  1. 4

    Folgendes scheint zu funktionieren für mich:

    http://jsfiddle.net/h8AP8/1/

    Alle Kredit gnarf hier und seine formhtml:

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

    Also Ihren geänderten code wäre:

    <div>
  <input value='0'>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>

<script>
(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!
      this.innerHTML = 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);


setInterval(function() {
  $('input').val(parseInt($('input').val()) + 1)
  console.log('div.html(): ', $('div').formhtml())
}, 1000)
</script>
    • Wie die zitierte Frage schon sagt, es ist ein innerHTML problem. Tatsächlich, wie verschiedene Browser Implementierung von innerHTML.
    InformationsquelleAutor mutex
  2. 5

    Versuchen Sie, die DOM-direkt. Zum Beispiel:

    <div id="myDiv">
  <input id="myInput" value='0'>
</div>

<script>
setInterval(function() {
    var v = parseInt(document.getElementById("myInput").value) + 1;
    document.getElementById("myInput").setAttribute("value",v);
}, 1000);
</script>

<input type="button" onclick="javascript:alert(document.getElementById('myDiv').innerHTML);" value="Click to see DOM" />
    • +1 Aber ich würde trotzdem gerne wissen, warum das jquery-code hat nicht funktioniert.
    • Dies ist eine alte post, und ich war auf der Suche nach dem warum auch. Hier ist was ich gefunden habe aus einem anderen Beitrag, das erklärt das "warum" Teil. stackoverflow.com/questions/32793811/...
    InformationsquelleAutor Oliver Moran
  3. 0

    Tut mir Leid, aber das problem ist nicht in der Beispiel-code, den Sie geliefert.
    Oder wenn dies die einzige html-Code in Ihre Seite, dann sind Sie missing die Start-und End-tags.

    Diese saubere Seite läuft einwandfrei auf meinem Rechner:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head></head>
    <body>
        <div><input value='0'></div>

        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
        <script>
        setInterval(function() {
          $('input').val(parseInt($('input').val()) + 1)
          console.log('div.html(): ', $('div').html())
        }, 1000);
        </script>
    </body>
</html>

    Sind oder Sie testen im Internet Explorer? In diesem Fall, entfernen Sie die Zeile, die die Protokollierung Ihrer Fehler-Konsole:

    console.log('div.html(): ', $('div').html())
    • Nope, das funktioniert nicht, entweder. Die Seite läuft wunderbar, das problem ist, dass der DOM nie ändert. Beachten Sie, dass value="0" ändert sich nie in der Konsole anmelden.
    InformationsquelleAutor Jacco
Schreibe einen Kommentar