Javascript：无法在 DOM 中找到新添加的表单输入

Question

我只能假设我做错了什么，因为当我单步执行 JavaScript 时，它根本找不到该对象。

我想做的是将组合框行动态添加到表中。组合框代码或多或少是无关紧要的，因为尝试通过表单查找 DOM 中新生成的输入似乎不起作用。我不确定它们是否存在。

首先，我有表单本身：

<form name="WEB070EDIT" action="WEB070" method="POST">

然后在下面，有一个将包含生成的单元格的表格：

<table id='Form2Section2' width="100%" border=0 cellspacing=0 cellpadding=2>
<tr class="woborder">
<th >5. Material or Process Name</th>
<th >6. Specification Number</th>
<th >7. Code</th>
<th >8. Special Process Supplier Code</th>
<th >9. Customer Approval Verification</th>
<th >10. Certificate of Conformance Number</th>
</tr>
</table>

再上面一点，有一个填充表格的令人发指的脚本函数：

<script type="text/javascript">
function addForm1(itemId)
{
 if (typeof addForm1.counter == 'undefined') {
 addForm1.counter = 1;
 }
 var object = document.getElementById(itemId);
 var curRow = object.insertRow(-1);
 curRow.className = "woborder";
 curRow.style.backgroundColor = "#D0D0D0";
 var curCell = curRow.insertCell(-1);

 var cellElem = document.createElement("text");
 cellElem.size = 25
 cellElem.value = ""
 cellElem.name = "V_P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "V_P2_MATERIAL_"+ addForm1.counter;

 var newAttr = document.createAttribute("onKeyUp");
 newAttr.nodeValue = "...[some lengthy script stuff trimmed for readability]...";
 cellElem.setAttributeNode(newAttr);

 curCell.appendChild(cellElem);

 curCell.appendChild(document.createElement("br"));

 cellElem = document.createElement("hidden");
 cellElem.name = "P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "P2_MATERIAL_" + addForm1.counter;
 cellElem.value = "";

 curCell.appendChild(cellElem);

 cellElem = document.createElement("select");
 cellElem.name = "MYSELECT_P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "MYSELECT_P2_MATERIAL_" + addForm1.counter;
 cellElem.size = 10;

 newAttr = document.createAttribute("onClick");
 newAttr.nodeValue = "...[more script stuff here we don't care about]...";

 eval("document.getElementById('V_P2_MATERIAL_" + addForm1.counter + "').focus();");
 eval("combohandleKeyUp('WEB070EDIT','MYSELECT_P2_MATERIAL_" + addForm1.counter + "','V_P2_MATERIAL_" + addForm1.counter + "','P2_MATERIAL_" + addForm1.counter + "',MYLIST_P2_MATERIAL,MYDESCLIST_P2_MATERIAL,9999999);");

}

</script>

我们不关心 onClick 和 onKeyUp 的原因是因为我们永远不会达到这一点。应该发生的事情是 eval() 应该运行一些 JavaScript，用一些预定义的变量填充组合框。只要输入是静态的，它就可以完美地工作。然而，当我点击运行这个脚本的按钮时，它在开头附近的那个combohandleKeyUp上呕吐，它应该在那里找到以下对象：

document.forms['WEB070EDIT'].elements["P2_MATERIAL_1"]

显然这是脚本本身内部的所有变量，但这就是它根据的解析结果到调试器。

当我使用 Firebug 的 DOM 检查器时，我可以找到表单，可以找到 WEB070EDIT，但找不到隐藏输入 P2_MATERIAL_1。静态的东西都在那里，但没有动态生成的东西。这对动态对象不起作用吗？我错过了什么吗？我构建它完全错误吗？

Answer 1

我在这里看到各种问题。

我不明白您为什么使用eval()。您正在评估的东西可以被称为普通的旧 JavaScript。一旦将元素添加到 DOM，就可以删除第一个 eval() 并用元素上的简单 .focus() 调用来替换。

您希望这能起到什么作用？

document.createElement("text");

这会在 HTML 中创建一个 标记，但这不是有效的标记。你想做这样的事情吗？

document.createElement("input");
cellElem.type = 'text';
//...

您正在设置 size 属性，因此我猜测您正在尝试生成 。

您正在初始化 addForm1.counter 但您从未增加它。这样你最终会得到重复的 ID，这会导致你咬牙切齿和各种各样的混乱。

您创建了一个 :

cellElem = document.createElement("select");

，然后因为您忽略将其添加到 DOM 而将其丢弃。您还可以在 之后创建一个 onClick 属性，但没有将其添加到任何内容中。

我稍微精简了你的代码并添加了一些你缺少的东西，似乎工作得很好： http://jsfiddle .net/ambiguously/3v6R3/