Dynamically modified value of input not reflected in DOM_问答_开发者

Dynamically modified value of input not reflected in DOM

开发者 https://www.devze.com 2023-02-26 01:15 出处：网络

How can I get the DOM to reflect the modified input value? <div> <input value=\'0\'> </div>

How can I get the DOM to reflect the modified input value?

<div>
  <input value='0'>
</div>
<script src='http://ajax.goo开发者_StackOverflow中文版gleapis.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>

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" />

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>

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

Dynamically modified value of input not reflected in DOM

精彩评论

关注公众号

热门标签

图文推荐

Dynamically modified value of input not reflected in DOM

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：