Jquery 对所有日期选择器文本框使用单一日期选择器功能

如何为所有新的动态添加的日期选择器文本框使用单一日期选择器jquery

由于您为每个日期选择器复制相同的id，因此最好使用类而不是id

由于新的日期选择器是动态创建的，所以在创建新的数据选择器之后，需要调用kendoDatePicker函数

<table id="myTable">
    <tr><td><input class="datePicker" /></td></tr>
 </table>
<br>
<button type="button" onclick="displayResult()">Insert new row</button>


$(".datePicker").kendoDatePicker({
    close: function() {
       console.log("closed datePicker");   
    }
});


function displayResult()
{
var table=document.getElementById("myTable");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
cell1.innerHTML=table.rows[0].cells[0].innerHTML;    
$(".datePicker").kendoDatePicker({
    close: function() {
       console.log("closed datePicker");   
    }
});
}

插入新行
$（“.datePicker”）.kendoDatePicker({
关闭：函数（）{
console.log（“关闭日期选择器”）；
}
});
函数displayResult（）
{
var table=document.getElementById（“myTable”）；
var行=table.insertRow（-1）；
var cell1=行插入单元格（0）；
cell1.innerHTML=table.rows[0]。单元格[0]。innerHTML；
$（“.datePicker”）.kendoDatePicker({
关闭：函数（）{
console.log（“关闭日期选择器”）；
}
});
}

粗略的修复可以做得更好。但它确实有效。希望能有帮助

逻辑是根据行计数动态更改id，并为每个输入初始化日期选择器

您的版本不起作用，因为您只是复制了html内容并粘贴了。需要再次初始化日期选择器才能工作

cell1.innerHTML= '<input id="datePicker'+$(row).index()+'" /></td>';//change innerhtml
$('#datePicker'+c).kendoDatePicker({})); initialze the datepicker again.//init datepicker again

cell1.innerHTML=''//更改innerhtml
$（'#datePicker'+c）.kendoDatePicker（{}））；再次初始化日期选择器//再次初始化日期选择器

代码链接已关闭