Не работает JavaScript в добавленном блоке через append

Или проблема динамически создаваемых элементов.

Суть проблемы

По кнопке «Добавить», динамически добавляются новые элементы, один из элементов это поле для ввода даты. На поле ввода даты навешивается скрипт для визуализации календаря (через метод $(‘.date’).datetimepicker())

И получается, у динамически созданного элемента нет календаря, а значит скрипт по его выводу не подключен, а он подключается только один раз при загрузки страницы.

Пример кода

<table id="clients">
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td class="text-left"><button type="button" onclick="addClient();" data-toggle="tooltip" title="{{ button_add }}" class="btn btn-primary" ><i class="fa fa-plus-circle"></i></button></td>
    </tr>
  </tfoot>                        
</table>
											
<script type="text/javascript">				
var client_row = 0;

function addClient() {
  html = '<tr id="client-row' + client_row + '">';
  html += '<td class="text-right">';
  html += '<div class="input-group date">';
  html += '<input type="text" name="client_shipping[' + shipping_row + '][date]" value="" placeholder="{{ entry_date }}" class="form-control" data-date-format="YYYY-MM-DD"/>';
  
  html += '<span class="input-group-btn"><button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button></span>';
  
  html += '</div>
  html += '</td>';
     
  html += '  <td class="text-left"><button type="button" onclick="$('#client-row' + client_row + '').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
  html += '</tr>';

  $('#clients tbody').append(html);

  client_row++;
}

$('.date').datetimepicker({
  language: '{{ datepicker }}',
  pickTime: false
}); 
</script>

Решение

В функции по выводу динамических элементов добавляю функции по подключению datetimepicker, плюс указываю в селекторе родителя элемента (#clients), и скрипт благополучно подключатеся туда куда надо

<script type="text/javascript">							
var client_row = 0;

function addClient() {
  html = '<tr id="client-row' + client_row + '">';
  html += '<td class="text-right">';
  html += '<div class="input-group date">';	
  html += '<input type="text" name="client_shipping[' + shipping_row + '][date]" value="" placeholder="{{ entry_date }}" class="form-control" data-date-format="YYYY-MM-DD"/>';
  
  html += '<span class="input-group-btn"><button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button></span>';
  
  html += '</div>
  html += '</td>';
     
  html += '  <td class="text-left"><button type="button" onclick="$('#client-row' + client_row + '').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
  html += '</tr>';

  $('#clients tbody').append(html);
  addEventDate(); // Добавил
  client_row++;
}

function addEventDate(){
  $('#clients .date').datetimepicker({ // указал родителя элемента
    language: '{{ datepicker }}',
    pickTime: false
  });
}

$('.date').datetimepicker({
  language: '{{ datepicker }}',
  pickTime: false
}); 
</script>