jQuery - не удается активировать DatePicker для элемента, вставленного после загрузки страницы

Question

У меня есть div, который может быть заполнен тремя различными макетами для ввода даты и времени.

Это HTML-код, загружаемый одним из макетов:

 <div class="row clearfix input-field">
  <div class="span10 date-selection">
    <div class="input-prepend date-time">
     <input class="date-input" name="date" size="16" type="text" value="">
    </div>
    <div class="input-prepend date-time">
     <input class="time-input" name="time" size="16" type="text" value="">
    </div>
  </div>
 </div>

Затем я использую вживую для управления такими слушателями

$('.date-input').live 'click', (e) ->
    $(this).datepicker({showOn:'focus'}).focus()
$('.time-input').live 'click', (e) ->
  $(this).timepicker({showOn:'focus'}).focus()

Это отлично работает, но у меня также есть ссылка для создания нового набора полей даты и времени.

$(".add-lesson").live 'click', (e) ->
    e.preventDefault()
    lesson = $('.multiple-lessons .row:first').clone()
    $(".multiple-lessons .row:last").after(lesson)
    $(".multiple-lessons .row:last input.date-input").attr('name', 'date2')
    $(".multiple-lessons .row:last input.date-input").attr('id', 'new-date-id')
    $(".multiple-lessons .row:last input.time-input").attr('name', 'time2')
    $(".multiple-lessons .row:last input.time-input").attr('id', 'new-time-id')

В последнем коде я буду генерировать лучшие имена, которые будут действительны для сохранения в рельсах, поэтому приведенные выше имена и идентификаторы предназначены только для тестирования.

ПРОБЛЕМА

Сборщики работают с оригинальными живыми элементами, но не с клонированными. Странно, если я не использую средство выбора и добавляю множество новых строк, используя клон, все клонированные строки работают со средствами выбора.

Я использую последнюю версию jQuery и jQuery ui

Есть идеи?

Answer 1

Мне не удалось заставить работать решение @pawar, поэтому я использую этот хак, пока не найду лучшее решение.

$('.date-input').datepicker('destroy')
$('.date-input').datepicker()

Answer 2

Ниже приведено полностью рабочее решение:

    $(function(){
    var counter = 0;
        $(".add-lesson").live( 'click', function (e) {
            e.preventDefault()
            lesson = $('.multiple-lessons .row:first').clone(false, false);

            $("input.date-input",lesson).attr('name', 'date2'+counter);
            $("input.date-input",lesson).attr('id', 'new-date-id'+counter);
            $("input.time-input",lesson).attr('name', 'time2'+counter);
            $("input.time-input",lesson).attr('id', 'new-time-id'+counter);
            $(".multiple-lessons .row:last").after(lesson);
            $('.multiple-lessons .row:last #new-date-id'+counter)
                .datepicker({showOn:'focus'});
            $('.multiple-lessons .row:last #new-time-id'+counter)
                .timepicker({showOn:'focus'});
            counter++;
        });

        $('.date-input').click(function(){
            $(this).datepicker({showOn:'focus'});
        });
        $('.time-input').click(function(){
            $(this).timepicker({showOn:'focus'});
        });

    });

<div class="multiple-lessons">
 <div class="row clearfix input-field">
     <div class="span10 date-selection">
     <div class="input-prepend date-time">
         <input class="date-input"  size="16" type="text" value=""></input>
     </div>
     <div class="input-prepend date-time">
         <input class="time-input"  size="16" type="text" value=""></input>
     </div>
     </div>
 </div>
</div>

Answer 3

Есть перегруженная версия клона, которая выглядит как -

.clone( [withDataAndEvents] [, deepWithDataAndEvents] )

Вы можете обычно связывать события с .bind() as,

 $('.date-input').bind 'click', (e) ->
    $(this).datepicker({showOn:'focus'}).focus()
$('.time-input').bind 'click', (e) ->
    $(this).timepicker({showOn:'focus'}).focus()

а затем используйте .clone(true, true) as,

lesson = $('.multiple-lessons .row:first').clone(true, true)

Я думаю, что это решит проблему.

Answer 4

Когда указатель даты присоединен к входу, специальный вход «hasDatepicker» добавляется к входу, чтобы сообщить плагину, что к этому входу уже прикреплен указатель даты. Удалите класс из клонированных входов, и тогда datepicker будет правильно связываться с ними при вызове.

Что-то вроде:

lesson = $('.multiple-lessons .row:first').clone().removeClass('hasDatepicker');