Как использовать Bootstrap Datetimepicker для нескольких динамически создаваемых входов

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


          });

Независимо от того, что я могу изменить, я не могу получить указатель даты и времени для заполнения,Любая помощь приветствуется.

Answer 1

Я сталкивался с подобными вопросами раньше.Может быть несколько решений.

Здесь уже есть ответ на SO:

добавление-datepicker-on-динамически созданных элементов

На самом деле они предлагают:

$('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 часто делает это за вас.