Добавление обработчика событий datepicker несколько раз

Question

Использование jQuery Я пытаюсь добавить обработчик события datepicker к элементу ввода.

<div id="Box_tmpl" style="border:solid 1px #777; background:#ddd; display: none;"> 
     <a class="remove-box" href="#">remove</a> 
     <div> 
      <label for="PeriodStart">Period (start):</label> 
      <input id="PeriodStart" class="start-end-date" name="period_start" readonly="readonly" /> 
     </div> 
     <div> 
      <label for="PeriodEnd">Period (end):</label> 
      <input id="PeriodEnd" class="start-end-date" name="period_end" readonly="readonly" /> 
     </div> 
    </div> 

    <a class="add-box" href="#" style="margin: 6px 0 10px auto;">add</a> 

    <div id="Boxes"> 
     <div style="border:solid 1px #777; background:#ddd;"> 
      <a class="remove-box" href="#">remove</a> 
      <div> 
       <label for="PeriodStart">Period (start):</label> 
       <input id="PeriodStart" class="start-end-date" name="period_start" readonly="readonly" /> 
      </div> 
      <div> 
       <label for="PeriodEnd">Period (end):</label> 
       <input id="PeriodEnd" class="start-end-date" name="period_end" readonly="readonly" /> 
      </div> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     $(function(){ 
      $('.start-end-date').datepicker({ dateFormat: "yy-mm-dd" }); 

      $('.remove-box').click(function(){ 
       $(this).parent().remove(); 
      }); 

      $('.add-box').click(function(){ 
       $('#Box_tmpl').clone().removeAttr('id').show().appendTo('#Boxes'); 
       $('.start-end-date').datepicker({ dateFormat: "yy-mm-dd" }); 
       $('.remove-box').click(function(){ 
        $(this).parent().remove(); 
       }); 
       return false; 
      }); 
     }); 
    </script> 

Добавление новой коробки работает. Добавление обработчика событий удаления в новом поле. Добавление обработчика события datepicker с новым полем НЕ РАБОТАЕТ. Я не понимаю, почему ... Создание нового элемента с помощью $(). Clone() ли новый элемент наследует обработчики событий старого элемента? Если это произойдет, может быть моя проблема добавления обработчик событий Datepicker несколько раз к одному элементу ... Я бегу из идей

Answer 1

вы должны использовать

$().clone(true) 

http://api.jquery.com/clone/

withDataAndEventsA Boolean указывает, следует ли копировать обработчики событий вместе с элементами. Начиная с jQuery 1.4, данные элемента будут скопированы.

для вашего вопроса в комментарии: при инициализации datepicker добавляет к вводу класс «hasDatepicker». вы не можете повторно инициализировать вход с этим классом, Итак, если вы хотите НЕ клонировать события, вы должны сделать .removeClass('hasDatepicker') с вашего клонированного ввода, а затем инициализировать его.

код в вашей скрипке должен быть изменен:

$('#Box_tmpl').clone().removeAttr('id').find('input.start-end-date').removeClass('hasDatepicker').end().show().appendTo('#Boxes'); 
$('.start-end-date').datepicker({ dateFormat: "yy-mm-dd" }); 

Примечание: .end() перемотку в состояние, не было до find()

Answer 2

Для того, чтобы связать событие использовать динамически создаваемые или клонированные элементы .on()

$('#Boxes').on('click', '.remove-box', function(){ 
    $(this).parent().remove(); 
}); 

Demo