javascript - 如何在多个动态创建的输入上使用 Bootstrap Datetimepicker

Question

我正在使用 ajax 更新表格。该表有多个日期输入，我希望在单击任何输入时弹出一个日期时间选择器。

我已经尝试为输入分配一个类，但没有任何反应，我在控制台中也没有收到任何错误。我只是在学习 jquery，javascript 所以，如果这是一个愚蠢的问题，我深表歉意。

我正在使用下面的代码来初始化日期时间选择器:

<!-- Datepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">   
$( document ).ready(function() {
        $('.dateedit').each(function(){
      $(this).datetimepicker();
      });
   });

我正在使用以下代码来填充我的表格:

$.ajax({
            url:"<?php echo base_url(); ?>clock/search_data",
            method:"post",
            dataType:"JSON",
            data:{fromDate:fromDate, toDate:toDate, userId:userId},
            success:function(data){
                console.log(data)
                var html = '<tr>';
                     for(var count = 0; count < data.length; count++){
                        html += '<tr>';
                        html += '<td class="table_data" data-row_id="'+data[count].id+'" data-column_name="id" >'+data[count].first_name+" "+data[count].last_name+'</td>';
                        html += '<td><input type="text" class="dateedit" data-row_id="'+data[count].id+'" data-column_name="clock_in" value="'+data[count].clock_in+'"></td>';
                        html += '<td><input type="text" class="dateedit" data-row_id="'+data[count].id+'" data-column_name="clock_out" value="'+data[count].clock_out+'"></td>';
                        html += '<td class="table_data" data-row_id="'+data[count].id+'" data-column_name="time">'+data[count].time+'</td>';
                        html += '<td><button type="button" name="delete_btn" id="'+data[count].id+'" class="btn btn-xs btn-danger btn_delete"><span class="glyphicon glyphicon-trash"></span></button></td></tr>';

                     }  

                     $('tbody').html(html);
                 }
                });
        }

我正在使用下面的代码来执行我的数据库更新功能:

$(document).on('change','.dateedit', function () {
            var id = $(this).data('row_id');
            var table_column = $(this).data('column_name');
            var value = $(this).val();
                $.ajax({
                  url:"<?php echo base_url(); ?>clock/update",
                  method:"POST",
                  data:{id:id, table_column:table_column, value:value},
                  success:function(data){
                    console.log(data)
                    search_data();
                  }
               })


          });

无论我似乎做了什么更改，我都无法让日期时间选择器填充。感谢您的帮助。

Answer 1

我以前遇到过类似的问题。可能有几个解决方案。

这里已经有一个答案发布在 SO 上:

putting-datepicker-on-dynamically-created-elements

他们实际上建议:

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

这通常适用于动态加载的内容。我认为 datepicker 确实会检查处理程序是否已附加，以便它不会被附加多次。

另一种方法，我有时使用它来创建一个函数来将处理程序附加到一个元素或一组元素，并在 AJAX 调用的“成功”处理程序中调用它。这实际上有时似乎更可靠，因为在某些情况下，将 DOM 委托(delegate)给另一个元素会给我带来一些问题。此外，如果日期选择器选项与加载页面时使用的默认值不同，您可以在成功处理程序中自定义日期选择器选项。

使用 $(document) 有时会给我带来问题，但如果您委托(delegate)给 DOM 中已有的封闭元素，通常可以正常工作。

通过调用成功处理程序的方法，您可以:

  $('.dateedit').each(function(){  // or change your selector to $(e + '.datedit') where e is the selector for the enclosing div or whatever.

  $(this).datetimepicker();
  });

在成功处理程序中。

我认为您甚至可以使用像 '.dateedit:not(.hasdatepicker)' 这样的选择器来附加到还没有处理程序的元素，但这可能不是必需的，因为 jQuery 经常为您做这件事。