输入的动态修改值未反映在 DOM 中
Posted
技术标签:
【中文标题】输入的动态修改值未反映在 DOM 中【英文标题】：Dynamically modified value of input not reflected in DOM 【发布时间】：2011-08-07 11:25:18 【问题描述】：如何让 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>
【问题讨论】：
【参考方案1】：尝试直接更改 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" />
【讨论】：
+1 但我还是想知道为什么 jquery 代码不起作用。 这是一篇旧帖子，我也在寻找原因。这是我从另一篇文章中找到的，它解释了“为什么”部分。 ***.com/questions/32793811/…【参考方案2】：以下似乎对我有用：
http://jsfiddle.net/h8AP8/1/
这里的所有功劳都归功于 gnarf 和他的 formhtml：
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
所以你修改后的代码是：
<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>
【讨论】：
正如引用的问题所暗示的，这是一个 innerHTML 问题。其实，不同的浏览器是如何实现innerHTML的。【参考方案3】：很抱歉，问题不在您提供的示例代码中。 或者当这是您页面中唯一的 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())
【讨论】：
不，这也不起作用。页面运行良好，问题是 DOM 永远不会改变。请注意，控制台日志中的 value="0" 永远不会更改。以上是关于输入的动态修改值未反映在 DOM 中的主要内容，如果未能解决你的问题，请参考以下文章