getElementById（）在動態分配的ID上不起作用

Question

我也通過了google和一些SO問題（例如this和this ），但是我沒有找到解決方案。 我正在為表中動態生成的行的驗證工作，最初，我正在嘗試驗證第一個td，循環和警報是否正常，但document.getElementById（）給出的是空值。 該腳本位於頁面的最底部。

這是JS代碼。

編輯：我已經添加了代碼，並且我想做的是在單擊提交按鈕時將字段留空時顯示錯誤（請填寫），並在填充時將其隱藏。

 $(function(){ $(document).on("click",".addRowAux",function(){ /*var valanx1 = $(this).parents("tr").children("td:nth-child(2)").children("input").val(); var valanx2 = $(this).parents("tr").children("td:nth-child(3)").children("input").val(); var valanx3 = $(this).parents("tr").children("td:nth-child(4)").children("select").val(); var valanx4 = $(this).parents("tr").children("td:nth-child(4)").children("input").val();*/ var countrow= $("#annextable tr").length; /*countrow++;*/ if(countrow<11) { $("#aux").append('<tr><td align="center">'+countrow+'</td><td align="center"><input type="text" name="ref_name[]" id="ref_name"/><span id="refNm_error">Please fill</span></td><td align="center"><input type="text" name="ref_desg[]" id="ref_desg"/></td><td align="center"><input type="text" name="ref_address[]" id="ref_address"/></td><td align="center"><input type="text" name="ref_email[]" id="ref_email"/></td><td align="center"><input type="text" name="ref_mobile[]" id="ref_mobile"/></td><td align="center"><input type="text" name="ref_pan[]" id="ref_pan"/></td><td align="center"><span class="addRowAux">Add</span>&nbsp;&nbsp;<span id="removeRowaux">Remove</span></td></tr>'); } else { //countrow--; alert("Can not add more then 10 record."); } }); }); $(document).on('click', '#removeRowaux', function () { // <-- changes var countrow= $("#annextable tr").length; if(countrow>3) { $(this).closest('tr').remove(); var tblObj = document.getElementById('annextable'); var no_of_rows = tblObj.rows.length; for(var i=0; i<no_of_rows-1; i++) { tblObj.rows[i+1].cells[0].innerHTML = i+1; tblObj.rows[i+1].cells[1].setAttribute( "delThis", i+1); ////alert(kj); //document.getElementById("refNm_error").id ="refNm_error"+j; } } else{ alert("you can not delete this") } }); $(document).on('click', '#hods', function () { var tblObj = document.getElementById('annextable'); var no_of_rows = tblObj.rows.length; for(var i=0; i<no_of_rows-1; i++) {tblObj.rows[i+1].cells[1].setAttribute( "delThis", i+1) var j=tblObj.rows[i+1].cells[1].getAttribute("delThis"); document.getElementById("refNm_error").id ="refNm_error"+j; } }); $(function(){ $(document).on('change', '.rel_type', function() { var relation = $(this).val(); if(relation =='OT'){ $(this).next("input").show(); $(this).next("input").val("Please Specify"); } else{ $(this).next("input").hide(); $(this).next("input").val("") } }); }); function yoVal(){ var refNm =document.getElementsByName('ref_name[]'); for(var i=0;i<=refNm.length;i++) { if(refNm[i].value==""){ alert("success"); } else{ var ch ='refNm_error'+(i+1); alert(ch); //document.getElementById(ch).style.display = "none"; alert("fail") } }} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="refForm"> <table width="99%" border="1" id="annextable" style="border-collapse:collapse" align="center"> <thead> <tr style="background:#ddd;"> <th>S.No</th> <th>Name</th> <th>Designation</th> <th>Address</th> <th>Email</th> <th>Mobile</th> <th>PAN</th> <th>Action</th> </tr> </thead> <tbody id="aux"> <tr> <td align="center">1</td> <td align="center"><input type="text" name="ref_name[]" id="ref_name"/><br/><span id="refNm_error">Please fill</span></td> <td align="center"><input type="text" name="ref_desg[]" id="ref_desg"/></td> <td align="center"><input type="text" name="ref_address[]" id="ref_address"/></td> <td align="center"><input type="text" name="ref_email[]" id="ref_email"/></td> <td align="center"><input type="text" name="ref_mobile[]" id="ref_mobile"/></td> <td align="center"><input type="text" name="ref_pan[]" id="ref_pan"/></td> <td align="center"> <span class="addRowAux">Add</span>&nbsp;&nbsp;<span id="removeRowaux">Remove</span></td> </tr> </tbody></table> <input type="button" onclick="yoVal()" value="Test" id="hods"/> </div> 

Answer 1

因為您要在變量k的開頭和結尾添加額外的引號。 采用：

 var k = 'refNm_error' + (i+1);

Answer 2

添加動態元素后，您可能需要重新加載DOM。

此鏈接可能有幫助

Answer 3

Update ，在為表創建動態表行時，沒有為input元素分配唯一的ID 。 所以我更新了addRow處理程序：

$(document).on("click", ".addRowAux", function () { 

添加唯一的input id ，如下所示：

$("#aux").append('<tr><td align="center">' + countrow + '</td><td align="center"><input type="text" name="ref_name[]" id="ref_name_' + countrow + '"/><span id="refNm_error_' + countrow + '">Please fill</span>...

而且我更改了代碼：

<span id="removeRowaux">Remove</span>

使用class而不是id ：

<span class="removeRowaux">Remove</span>

現在，刪除行處理程序使用removeRowaux類偵聽跨度中的事件：

 $(document).on('click', '.removeRowaux', function ()

現在，刪除行功能可以使用，並且沒有具有相同id的范圍。 所以我認為代碼中的getElementById()沒有任何問題-可以正常工作:-)

更新的小提琴