дублирование JQuery DatePicker
-
09-06-2019 - |
Вопрос
Функция 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>
Чтобы инициализировать средство выбора даты, в соответствии с документацией по пользовательскому интерфейсу jQuery , мне нужно только сделать < code> $ ('# example'). 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
, это всегда работает.
Решение
Я бы порекомендовал просто использовать общее имя класса. Однако, если вы по какой-то причине против этого, вы также можете написать функцию для создания средств выбора даты для всех текстовых полей в вашем шаблоне div
(который будет вызываться после каждого дублирования). Что-то вроде:
function makeDatePickers() {
$("#template input[type=text]").datepicker();
}
Другие советы
Вместо этого я использую класс CSS:
<input type="text" id="BeginDate" class="calendar" />
<input type="text" id="EndDate" class="calendar" />
Затем в вашей функции document.ready
:
$('.calendar').datepicker();
Использование этого способа для нескольких полей календаря работает для меня.
У меня была очень похожая проблема, и после нескольких часов тестирования я нашел решение. Я копировал блок HTML-кода и вставлял его после раздела, который уже содержал календарь выбора даты jQuery. Сначала я не смог понять, что календарь пользовательского интерфейса jQuery изменяет класс элемента при выполнении функции .datepicker ()
. В результате, когда вы пытаетесь скопировать код и инициировать новый экземпляр календаря для этого нового раздела, происходит сбой, потому что, согласно CSS, он уже есть. Если вы попытаетесь использовать .datepicker ('destroy')
, вам не удастся уничтожить этот призрачный экземпляр, потому что он на самом деле не существует. Я решил проблему, сбросив класс элемента выбора даты в моем HTML, а затем добавив элемент выбора даты в этот элемент ...
Ниже приведен код, который я использовал. Надеюсь, это сэкономит кому-то еще время ...
$('#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');
Спасибо, yall.