在動態生成的表格行中創建jquery datepicker

Question

function AddDatepicker() {     
    $('#Ecd').datetimepicker();  
} 

$(document).on("click", "#btnAdd", function() {    

    var $new_row = $("<tr>" + 
     "<td><input type='text' id='Ecd' /></td>" + 
     "</tr>"); 

    var $EcdTextbox = $new_row.find('text'); 

    $EcdTextbox.append(AddDatePicker()); 

    $("#tblWorkpack tbody").append($new_row); 


}); 

由於某些原因，我需要以上述書面方式創建動態表格，因爲還有其他行。我需要在動態生成的表格行中添加datepicker。上述函數僅適用於第一行，並且對於以下行不成立。請幫我解決這個問題。

Answer 1

它可以這樣做。

只需在新的輸入元素上添加日期選擇器即可。你不能將一個函數追加到一個元素上。如果您正在嘗試查找並輸入字段類型文本，則需要編寫.find（'input [type =「text」]'）not find（'text'）:) 永遠不會生成具有相同id名稱的動態元素： ）

$(document).on("click", "#btnAdd", function() { 
 

 
    var $new_row = $("<tr><td><input type='text' class='Ecd' /></td></tr>"); 
 

 
    $new_row.find('input').datepicker(); 
 

 

 
    $("#tblWorkpack tbody").append($new_row); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 

 

 
<table id="tblWorkpack"> 
 
    <tbody></tbody> 
 
</table> 
 

 
<div id="btnAdd">Add Row</div>