无法通过 JQUERY 在动态添加的表行中添加 datetimepicker答案

【问题标题】：Can't add datetimepicker in dynamically added table rows via JQUERY无法通过 JQUERY 在动态添加的表行中添加 datetimepicker
【发布时间】：2018-07-08 22:04:12
【问题描述】：

我正在做一个项目，我发现很难将 datetimepicker 添加到动态添加的表行中。我已将 datetimepicker 添加到静态表行，它对它们工作正常，但不适用于动态添加的表行。

我正在关注的 datetimepicker 教程

https://eonasdan.github.io/bootstrap-datetimepicker/

我尝试过的代码：我正在克隆隐藏的行。

行克隆功能：

      // Table Add Function
      $('.table-add').click(function () {

        var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');            
        hid = $TABLE.find('tr.hide').attr('id');
        // //Assigning every table row a unique ID
        var max=0;
        $('table').find('tr').each(function(){
            var id=parseInt($(this).attr('id'));
            if (id>=max){
               max = id;
             }
         });

         //cloning row with new ID  
         $clone.attr('id', parseInt(max)+1);
         //always assign new id to new table row, will be easy to recognize rows
         $clone.find('input.myinput').attr('id', parseInt(max)+1);

         $clone.find("[name='datepicker']").datetimepicker();
         //$("[name='datepicker']").datetimepicker();

         $hiddentr = $('table').find('tr.hide');

         //add dynamic word picker to cloned rows dynamically
         $clone.find('td:nth-last-child(4)').after('{% if obj.word_picker == "Y" %} <td><input id="wordpicker" style="border:none"; data-role="tagsinput" class="myinput" name="unique_tag"/></td>{% endif %}');
         $clone.appendTo( $('#'+hid).parent());
         //submitting form after row clone
         submitForm();
      });

隐藏 td 的 HTML：

           <td> <div style="position: relative"> <input class = "form-control" type= "text" name = "datepicker" 
            id= "datetime"></div> </td>

【问题讨论】：

标签： javascript jquery bootstrap-datetimepicker

【解决方案1】：

我的猜测...是该元素必须在 DOM 中才能实例化 datetimepicker...

所以将克隆 ID 保存在一个变量中，以便您可以使用它来查找正确的 datepicker 元素。追加行。最后实例化 datetimepicker。

// Table Add Function
$('.table-add').click(function () {

  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');            
  hid = $TABLE.find('tr.hide').attr('id');
  // //Assigning every table row a unique ID
  var max=0;
  $('table').find('tr').each(function(){
    var id=parseInt($(this).attr('id'));
    if (id>=max){
      max = id;
    }
  });

  //cloning row with new ID
  var cloneID = parseInt(max)+1;

  $clone.attr('id', cloneId);
  //always assign new id to new table row, will be easy to recognize rows
  $clone.find('input.myinput').attr('id', parseInt(max)+1);

  $hiddentr = $('table').find('tr.hide');

  //add dynamic word picker to cloned rows dynamically
  $clone.find('td:nth-last-child(4)').after('{% if obj.word_picker == "Y" %} <td><input id="wordpicker" style="border:none"; data-role="tagsinput" class="myinput" name="unique_tag"/></td>{% endif %}');
  $clone.appendTo( $('#'+hid).parent());

  // Use the clone ID to instantiate datetimepicker
  $("#cloneID").find("[name='datepicker']").datetimepicker();

  //submitting form after row clone
  submitForm();
});

【讨论】：