Question

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

<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>

非常感谢任何帮助！

大卫

Answer 1

添加项目后，您需要重新初始化日期选择器小部件。换句话说，它应该是这样的：

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});
    });
}

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

1 个答案: