JavaScript/jQuery +日期时间选择器：动态添加的输入不显示激活日期时间选择器。

我想弄清楚为什么我的动态添加输入块（在表的单元格内）不会触发日期时间选择器。我提供了一个演示此问题的概念证明代码块。如果按原样运行此代码，默认输入标记（id：dti1）可以很好地工作，并且日期时间选择器会弹出并允许用户选择日期和时间。但是，当您单击“添加另一个”时，日期时间选取器不会在新的输入元素上弹出，即使它正确地显示与正确关联的dtpick类。我的假设是日期时间选择器与页面加载时的每个dtpick类元素相关联，所以这就是为什么日期时间选择器不起作用。当我动态添加行时，是否有办法强制这种情况发生？JavaScript/jQuery +日期时间选择器：动态添加的输入不显示激活日期时间选择器。

<html> 
<head> 
<!-- includes: jquery, jquery_ui_datepicker, timepicker-- references removed here--> 
<script> 
    $(document).ready(function(){ 
    $('.dtpick').datetime({ 
    userLang : 'en', 
    americanMode: true}); 
    }); 
    function addItem() 
    { 
    var t = document.getElementById('myTable'); 
     var row = t.insertRow(-1); 
     var c1 = row.insertCell(0); 

     var c1content=document.createElement("input"); 
     c1content.setAttribute("type","text"); 
     c1content.setAttribute("name","dtnew"); 
     c1content.setAttribute("id","dtinew"); 
     c1content.setAttribute("class","dtpick"); 
     c1content.setAttribute("value","2011-08-20 01:00:00"); 

     c1.appendChild(c1content); 
    } 
</script> 
</head> 
<body> 
<table id="myTable"> 
<tr> 
    <td><b>Row Header:</b></td> 
</tr> 
<tr> 
    <td><input type="text" name="dt1" id="dti1" class="dtpick" value="2011-08-21 01:00:00"></td> 
</table><br> 
<a onclick="addItem()"> Add another</a> 
</body> 
</html>

任何帮助非常感谢！

大卫

来源

2011-08-16 David B.

你追加项目后，您需要重新初始化您的日期选择器插件。换句话说，它应该看起来像这样：

function addItem() 
{ 
    var t = document.getElementById('myTable'); 
    var row = t.insertRow(-1); 
    var c1 = row.insertCell(0); 

    var c1content=document.createElement("input"); 
    c1content.setAttribute("type","text"); 
    c1content.setAttribute("name","dtnew"); 
    c1content.setAttribute("id","dtinew"); 
    c1content.setAttribute("class","dtpick"); 
    c1content.setAttribute("value","2011-08-20 01:00:00"); 

    c1.appendChild(c1content); 

    $('.dtpick').datetime({ 
     userLang: 'en', 
     americanMode: true}); 
    }); 
}

来源

2011-08-16 22:45:14

非常好 - 这个工作完美。后续问题 - 在我的实际实现中，我实际上为我创建的每个输入生成单位名称/ ID值。如果我在dtpick类中有大量的输入，那么'$（'。dtpick'）。datetime'和'$（'＃uniqueID'）之间是否存在性能差异？datetime（{'？ –

'这个班会比一个独特的ID更优雅，因此更好的方式去，但其他人可能会过来纠正我。 –

JavaScript/jQuery +日期时间选择器：动态添加的输入不显示激活日期时间选择器。

回答

相关问题