Дублирование jQuery datepicker
Функция datepicker работает только с первым созданным полем ввода.
Я пытаюсь дублировать datepicker, клонируя div, который его содержит.
<a href = "#" id = "dupMe">click</a>
<div id = "template">
input-text <input type = "text" value = "text1" id = "txt" />
date time picker <input type = "text" id = "example" value = "(add date)" />
</div>
Чтобы инициализировать datepicker, согласно документация jQuery UI, мне нужно сделать только $('#example').datepicker();, и он действительно работает, но только на первом созданном datepicker.
Код для дублирования div следующий:
$("a#dupMe").click(function(event){
event.preventDefault();
i++;
var a = $("#template")
.clone(true)
.insertBefore("#template")
.hide()
.fadeIn(1000);
a.find("input#txt").attr('value', i);
a.find("input#example").datepicker();
});
Самое странное, что на document.ready у меня:
$('#template #example').datepicker();
$("#template #txt").click(function() { alert($(this).val()); });
и если я нажимаю на #txt, он всегда работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вместо этого я использую класс CSS:
<input type = "text" id = "BeginDate" class = "calendar" />
<input type = "text" id = "EndDate" class = "calendar" />
Затем в вашей функции document.ready:
$('.calendar').datepicker();
Использование этого способа для нескольких полей календаря работает для меня.
Я бы также рекомендовал просто использовать общее имя класса. Однако, если вы по какой-то причине против этого, вы также можете написать функцию для создания средства выбора даты для всех текстовых полей в вашем шаблоне div (который будет вызываться после каждого дублирования). Что-то вроде:
function makeDatePickers() {
$("#template input[type=text]").datepicker();
}
У меня была очень похожая проблема, и после нескольких часов тестирования я нашел решение. Я копировал блок HTML-кода и вставлял его после раздела, который уже содержал календарь выбора даты jQuery. Сначала мне не удалось понять, что календарь jQuery UI изменяет класс элемента при выполнении функции .datepicker(). В результате, когда вы пытаетесь скопировать код и инициировать новый экземпляр календаря для этого нового раздела, он терпит неудачу, потому что, согласно CSS, он уже существует. Если вы попытаетесь использовать .datepicker('destroy'), это не сможет уничтожить этот призрачный экземпляр, потому что он на самом деле не существует. Я решил проблему, сбросив класс элемента выбора даты в моем HTML, а затем добавив datepicker к этому элементу ...
Ниже приведен код, который я использовал. Надеюсь, это сэкономит время кому-то еще ...
$('#addaddress').click(function() {
var count = $('.address_template').size();
var html = $('.address_template').eq(0).html();
$('#addaddress').before('<div class = "address_template">' + html + '</div>');
$('.address_template H1').eq(count).html("Previous Address " + count);
$('.address_date').eq(count).attr("class","address_date");
$('.address_date').eq(count).attr("id","movein" + count);
$("#movein" + count).datepicker();
});
HTML-код, который я клонирую, имеет несколько входов datepicker.
Используя ответ Райана Стемкоски и комментарий Алекса Кинга, я придумал следующее решение:
var clonedObject = this.el.find('.jLo:last-child')
clonedObject.find('input.ui-datepicker').each(function(index, element) {
$(element).removeClass('hasDatepicker');
$(element).datepicker();
});
clonedObject.appendTo('.jLo');
Спасибо всем.
Я не совсем понимаю пример кода, но у вас есть хороший момент - вам нужно удалить класс
.hasDatepicker, прежде чем вы сможете повторно инициализировать datepicker. Затем повторно инициализируйте datepicker на клонированном элементе, и он отлично работает.