开发者

Dynamically modified value of input not reflected in DOM

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜