动态修改的输入值在DOM中没有反映

Question

动态修改的输入值在DOM中没有反映

7

如何让DOM反映修改后的输入值？

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

- Jesse Aldridge

3个回答

4

以下对我来说似乎有效：

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

感谢gnarf的贡献和他的formhtml：

在Firefox中使用jQuery html()（使用.innerHTML）会忽略DOM更改

因此，您修改后的代码应该是：

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

- mutex

正如引用的问题所示，这是一个innerHTML问题。实际上，不同的浏览器实现innerHTML也有所区别。 - Alejandro García Iglesias

0

很抱歉，但问题不在您提供的示例代码中。或者当这是您页面中唯一的HTML时，则缺少起始和结束标记。

这个干净的页面在我的机器上完美运行：

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

或者你是在使用Internet Explorer进行测试吗？如果是这样，请删除记录到错误控制台的那行代码：

console.log('div.html(): ', $('div').html())

- Jacco

不行，这也不起作用。页面运行良好，问题在于DOM从未更改。请注意，在控制台日志中value="0"从未更改。 - Jesse Aldridge

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oliver Moran · Accepted Answer

尝试直接更改DOM。例如：

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