发表新帖
发表新帖

Dynamically modified value of input not reflected in DOM

前端 未结
关注
3 929
囚心锁ツ
囚心锁ツ 2020-12-20 18:46

How can I get the DOM to reflect the modified input value?
相关标签:
3条回答
  • 栀梦
    2020-12-20 19:15

    The following seems to work for me:

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

    All credit to gnarf here and his formhtml:

    jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

    So your modified code would be:

    <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>
    0 讨论(0)
  • 轮回少年
    2020-12-20 19:18

    Try changing the DOM directly. For example:

    <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" />
    0 讨论(0)
  • 猫巷女王i
    2020-12-20 19:29

    I'm sorry, but the problem is not in the example code you supplied. Or when this is the only html in your page, then you're missing the starting and closing tags.

    This clean page runs perfectly on my machine:

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

    Or are you testing in Internet Explorer? In that case, remove the line which is logging to your error console:

    console.log('div.html(): ', $('div').html())
    0 讨论(0)
 看不清?
提交回复
热议问题