Невозможно добавить datepicker в новый элемент

Question

Я динамически добавляю новые элементы формы, используя jquery. По какой-то причине вызов .datepicker() не будет работать над новыми элементами, которые я добавляю, но работал над старыми, которые не были добавлены динамически. Если я положил .attr('style', 'color: red;') вместо .datepicker(), он работает. Обратите внимание, что исходный вызов внутри функции готовности документа работает.

Это код, который вызывается при нажатии кнопки добавить щелкают:

function addMulti(name) { 
    it = $('[name=' + name + ']'); 
    base = it.data('baseName'); 
    on = it.data('number') + 1; 
    name = base + "-" + on; 
    copy = it.clone() 
    copy.prop("name", name).attr("data-is-default", false).removeAttr('data-number'). 
     fadeIn('slow').appendTo(it.parent()); 
    it.data('number', on); 
    if(it.hasClass('date-pickable')) { // <-- This returns true, I checked. 
     copy.datepicker(); 
    // Where if I add clone.attr('style', 'color: red;') it turns it red. 
} 
} 

Это вызов, который делает все поля, которые создаются на эту дату точки сборщиков:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("input.date-pickable").datepicker() 
}); 
</script> 

Нет ошибок, которые появляются в firebug или google chrome «проверять элемент». Однако что-то странное. Если я набираю тот же вызов, что и в функции document.ready, в консул Firebug, он все равно не будет добавлять вновь добавленные элементы datepickers. Тем не менее, если я нахожусь над выходом, он выбирает элементы, на которые он должен быть нацелен.

$("input.date-pickable").datepicker() // What I typed in 

Object[input#dp1371953134342.field-input 06/22/2013, input#dp1371953134343.field-input, input#dp1371953134342.field-input 06/22/2013, input#dp1371953134342.field-input 06/22/2013] // What it put out. The last three numbers are the IDs JQuery assigned to the added elements. I checked. 

Answer 1

DatePicker JQuery UI всегда добавит класс hasDatepicker к любому элементу, который имеет DatePicker, чтобы избежать присоединения нескольких datepickers к одному элементу.
Когда вы клонируете элемент, у которого уже есть datepicker, вы также получаете этот класс, и вы не можете присоединить новый кэш для datepicker, поскольку пользовательский интерфейс jQuery считает, что элемент уже имеет datepicker.

Удалите класс из клона:

var copy = it.clone(false); 

copy.removeClass('hasDatepicker').prop("name", name) 
    .attr("data-is-default", "false").removeAttr('data-number') 
    .fadeIn('slow').appendTo(it.parent()); 

и стараться не сделать все ваши переменные глобальными.

Answer 2

Будет ли это работать?

<script type="text/javascript"> 
$(document).ready(function() { 
    $(document).on('focus',"input.date-pickable", function(){ 
     $(this).datepicker(); 
    }); 
}); 
</script> 

Demo JSfiddle