漫长的故事短…许多简化,调试,弄清楚什么行触发IE忽略新的表单输入.所以行为问题解决了.
但现在我必须问：为什么？这是IE的bug吗？
以下是简化代码：
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function add() {
div = document.getElementById("mylist");
// *** Adding text here works perfectly fine. ***
div.innerHTML += " ";
e = document.createElement("input");
e.setAttribute("type","text");
e.setAttribute("name","field3");
e.setAttribute("value","--NEWVALUE--");
div.appendChild(e);
// *** Adding text here works perfectly fine in Firefox,but for
// Internet Explorer it causes field3 to not be submitted. ***
//div.innerHTML += " ";
}
</script>
</head>
<body>
<form action="" method="get">
<div id="mylist">
<input type="text" name="field1" value="value1" />
<input type="text" name="field2" value="value2" />
</div>
<a href="javascript:" onclick="add()" />Add</a>
<input type="submit" value="Submit" />
</form>
</body>
</html>
试试看,做明显的：在IE中加载,点击添加,点击提交,看看地址栏里面有什么.如果您取消注释add()中的最后一行,IE将突然停止报告字段3.它在Firefox中可以正常工作.
有任何想法吗？好奇心想知道. (如果需要,如何在便携式的方式添加文本,所以IE是快乐的？)
解决方法
Is this an IE bug?
似乎如此.创建< input>元素通过DOM方法,IE不会很好的拿起’name’属性.它是一种类型的,因为元素确实提交,但如果你试图获得一个’innerHTML’表示的元素,它神秘地消失.如果通过直接写入innerHTML创建元素,则不会发生这种情况.
另外,如果您使用DOM Level 0表单导航方法,如’myform.elements.x.value’,通过’elements’数组访问可能无效(类似地,直接’myform.x’访问某些人误导使用).在任何情况下,这些天你可能更喜欢getElementById().
所以要么使用innerHTML或者使用DOM方法;最好不要在创建表单域时混合它们.
这是documented (see ‘Remarks’),最后在IE8中修复.
无论如何,永远不要做：
div.innerHTML+= ‘…’;
这只是语法糖：
div.innerHTML= div.innerHTML+’…’;
换句话说,它必须对元素的整个子HTML元素进行序列化,然后进行字符串连接,然后将新的字符串重新解析回元素,抛弃所有原始内容.这意味着你会丢失任何无法序列化的东西：以及IE的虚拟半创建的“名称”属性,这也意味着任何JavaScript事件处理程序,DOM侦听器或其他每个子元素附加的自定义属性.此外,不必要的序列/解析周期很慢.