JavaScript / jQuery + средство выбора даты и времени: динамически добавленный ввод не отображает срабатывание средства выбора даты и времени. - PullRequest
Новая
       9

JavaScript / jQuery + средство выбора даты и времени: динамически добавленный ввод не отображает срабатывание средства выбора даты и времени.

0 голосов
/ 17 августа 2011

Я пытаюсь выяснить, почему мой динамически добавленный блок ввода (в ячейке таблицы) не запускает средство выбора даты и времени. Я предоставил блок концепции кода, который демонстрирует эту проблему. Если вы запустите этот код как есть, входной тег по умолчанию (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>

Любая помощь очень ценится!

David

1 Ответ

1 голос
/ 17 августа 2011

После добавления элемента вам необходимо повторно инициализировать виджет выбора даты. Другими словами, это должно выглядеть так: 

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