时间戳

首页 > 解决方案 > 如何在多个动态创建的输入上使用 Bootstrap Datetimepicker

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

问题描述

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

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

我正在使用下面的代码来初始化 datetimepicker：

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


          });

无论我似乎改变了什么，我都无法填充 datetimepicker。任何帮助表示赞赏。

标签： javascriptjquerycodeigniter

解决方案

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

SO here 上已经发布了一个答案：

将日期选择器放在动态创建的元素上

他们实际上建议：

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

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

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

使用 $(document) 有时会给我带来问题，但如果你委托给通常工作的 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 经常为你这样做。

推荐阅读