Почему делает datepicker UI jQuery, порывают с динамическим DOM?
Вот поворот на решение, предоставленное @Anatoliy.
Мне нужно было генерировать только светлые цвета (для фона), поэтому я выбрал трехбуквенный (#AAA) формат:
function get_random_color() {
var letters = 'ABCDE'.split('');
var color = '#';
for (var i=0; i<3; i++ ) {
color += letters[Math.floor(Math.random() * letters.length)];
}
return color;
}
7 ответов
А, понял. Сразу после того, как я добавляю HTML-код в DOM, я запускаю его для всех входных данных, с которыми я хотел бы иметь всплывающее окно datepicker. Datepicker добавляет класс к элементам, к которым он был прикреплен, поэтому мы можем отфильтровать существующие входные данные и применить только это к новым.
$ ('. date'). not ('. hasDatePicker'). datepicker ();
Я надеюсь, что это поможет людям, поскольку я несколько дней гуглил и ничего не нашел!
Вы также должны отметить, что было бы быстрее проверить input.date в новый сгенерированный HTML, установив его как контекст, а не всю страницу, так как это сэкономит время, поскольку это более эффективная операция.
Use jQuery selectors:
$(".mydatepicker:not(.hasDatepicker)").datepicker()
I had a similar Issue, I had multiple tables on a page and each had multiple datepickers, also on click of button "AddLine" it added a table row with dynamic HTML and datepicker.
I realized after a lot of search that my input date fields had no "id" defined they looked like this
<input type="text" class="datepicker" name="mDate1" value="" size=8 >
jquery was pointing all the date fields values to the very first date field defined on page, the calendar would popup on all the date fields but the value of 1st date field would change, I made a change to the html like this
<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >
by adding a "id" and it started working, for the dynamic date fields I change the Id like this
var allColumns = $("#"+$tableId+" tr:last td");
$(allColumns).each(function (i,val) {
if($(val).find(":input").hasClass("datepicker")){
$(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
}
});
Я испытал тот же симптом, в этом вызванном, имея TD, содержащий элемент с тем же атрибутом ID, что и вход,
<td id="fld_xyz"><input id="fld_xyz" class="date" /></td>
, я знаю, что это не идеально, но все равно стоит узнать что компонент DatePicker, похоже, полагается на уникальность удостоверения личности.
У меня была эта проблема. Моя ситуация закончилась тем, что у меня был другой элемент с тем же идентификатором, что и ввод с помощью datepicker.
Использовать
$j(id or class).removeClass('hasDatepicker').datepicker();
Работает
Чтобы оно работало с динамическим DOM, необходимо использовать событие 'live'. Таким образом, если классом для входных данных datepicker является 'date-input', следующий код заставит его работать:
$(document).ready(function() {
$('.date-input').live('click', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});