Javascript 动态修改的输入值未反映在DOM中_Javascript_Jquery_Dynamic

Javascript 动态修改的输入值未反映在DOM中

javascript jquery dynamic

Javascript 动态修改的输入值未反映在DOM中,javascript,jquery,dynamic,Javascript,Jquery,Dynamic,如何让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()

如何让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>


setInterval（函数（）{
$（'input'）.val（parseInt（$（'input'）.val（））+1）
console.log（'div.html（）：'，$（'div'）.html（））
}, 1000)

尝试直接更改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" />


setInterval（函数（）{
var v=parseInt（document.getElementById（“myInput”）.value）+1；
document.getElementById（“myInput”）.setAttribute（“值”，v）；
}, 1000);

很抱歉，问题不在您提供的示例代码中。或者，当这是页面中唯一的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>

以下几点似乎对我有用：

所有这些都归功于gnarf及其表单HTML：

因此，修改后的代码是：

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


（函数（$）{
var oldHTML=$.fn.html；
$.fn.formhtml=函数（）{
if（arguments.length）返回oldHTML.apply（this，arguments）；
$（“输入，按钮”，此）.each（函数（）{
this.setAttribute（'value'，this.value）；
});
$（“textarea”，this）.each（函数（）{
//更新-谢谢Raja！
this.innerHTML=this.value；
});
$（“输入：收音机，输入：复选框”，此）。每个（函数（）{
//我甚至不确定你是否需要为“checked”这样做
//但见鬼，安全总比后悔好
如果（this.checked）this.setAttribute（'checked'，'checked'）；
否则此.removeAttribute（'checked'）；
});
$（“选项”，this）.each（函数（）{
//也不确定，但是，更安全。。。
如果（this.selected）this.setAttribute（'selected'，'selected'）；
否则此.removeAttribute（'selected'）；
});
返回oldHTML.apply（此）；
};
//如果需要，可以选择覆盖real.html（）
//$.fn.html=$.fn.formhtml；
})（jQuery）；
setInterval（函数（）{
$（'input'）.val（parseInt（$（'input'）.val（））+1）
console.log（'div.html（）：'，$（'div'）.formhtml（））
}, 1000)

+1但我还是想知道为什么jquery代码不起作用。这是一篇老文章，我也在寻找原因。下面是我在另一篇文章中发现的，解释了“为什么”部分。不，这也不行。页面运行正常，问题是DOM从未更改。请注意，value=“0”在控制台日志中从未更改。正如引用的问题所示，这是一个innerHTML问题。实际上，不同的浏览器如何实现innerHTML。

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