Question

我正在使用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。任何帮助表示赞赏。

Answer 1

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

此处已经在SO上发布了答案：

putting-datepicker-on-dynamically-created-elements

他们实际上建议：

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

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

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

使用$（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经常为您执行此操作。

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

1 个答案: