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() 일부 미리 정의 된 변수와 콤보 상자를 채우는 일부 자바 스크립트를 실행하도록되어 있습니다. 입력이 정적 인 한 완벽하게 작동합니다. 나는이 스크립트를 실행하는 버튼을 누르면 때, 그것은 바로이 다음 개체 찾을 것으로 예상되는 시작, 근처에 그 combohandleKeyUp에 pukes :

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

은 분명히이 스크립트 자체 내부의 모든 변수입니다 만 그것이 디버거에 따라 파싱됩니다.

방화범이 끌리는 DOM 검사기를 사용할 때 WEB070EDIT을 찾을 수있는 양식을 찾을 수 있지만 P2_MATERIAL_1 숨겨진 입력을 찾을 수 없습니다. 정적 항목은 모두 들어 있지만 동적으로 생성되는 것은 없습니다. 이것은 단순히 동적 객체에서 작동하지 않습니까? 내가 놓친 게 있니? 나는 그것을 완전히 잘못 구축하고 있는가?

Answer 1

여기에 다양한 문제가 있습니다.

나는 왜 eval()을 사용하는지 이해가되지 않습니다. 당신이 평가하고있는 것들은 평범한 예전 JavaScript라고 할 수 있습니다. 첫 번째 eval()은 DOM에 추가되는 즉시 요소에 대한 간단한 .focus() 호출로 삭제하고 바꿀 수 있습니다.

어떻게해야할까요?

document.createElement("text"); 

이렇게하면 <text> 태그가 HTML에 생성되지만 올바른 태그가 아닙니다. 이런 식으로하려고합니까? 난 당신이 <input type="text" .../>을 생산하기 위해 노력하고 있음을 추측하고있어 그래서

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

당신은 size 속성을 설정하고 있습니다.

addForm1.counter을 초기화 중이지만 결코 증가시키지 마십시오. 이렇게하면 ID가 중복되어 결국 치아와 여러 종류의 혼란이 야기됩니다.

cellElem = document.createElement("select"); 

다음은 DOM에 추가 무시로 던져 :

당신은 <select> 만듭니다. <select> 바로 뒤에 onClick 속성을 만들었지 만 추가하지 않았습니다. 당신은`eval`를 사용하는 이유는 http://jsfiddle.net/ambiguous/3v6R3/