проблема при клонировании jQuery UI datepicker
У меня есть отделение, в котором существует datepicker. Я использую что-то вроде этого для клонирования его:
mydiv = $('#someDiv');
// works fine so far
mydiv.find('input.datefield').datepicker();
// clone without the events and insert
newDiv = myDiv.clone(false).insertAfter(myDiv);
// datepicker won't re-init if this class is present
newDiv.find('.hadDatepicker').removeClass('hadDatepicker');
// reinitialize datepicker
newDiv.find('input.datefield').datepicker();
Это - разделенный вниз версия моего кода. Это работает, и календарь обнаруживается как ожидалось, где это ожидается.. но когда дата нажата, значение предыдущего datepicker обновляется.. (тот, от которого это было клонировано).
Я попытался уничтожить (inexisting) экземпляр прежде как это:
newDiv.find('input.datefield').datepicker('destroy').datepicker();
Никакая удача..
Я проверил, как это отслеживает экземпляры и вручную очистило данные как это:
newDiv.find('input.datefield').data('datepicker', false).datepicker('destroy').datepicker();
Все еще никакая удача.
То, что я не понимаю, - то, что только поведение выбора даты является багги, все остальное работает как ожидалось.
Я действительно не знаю, что еще проверить теперь..
5 ответов
Вот в чем проблема. datepicker создает атрибуты идентификатора на основе UUID для полей ввода, которые он связывает при инициализации. Клонирование этих элементов приводит к большему числу элементов с тем же идентификатором (который не нравится jQuery) или с другим идентификатором, если ваша процедура клонирования управляет этим (что означает, что datepicker не знает о клонах). Другими словами, datepicker инициализирует только все элементы, соответствующие вашему селектору во время его вызова. На самом деле имеет смысл пытаться уничтожать/отключать/включать снова и снова, когда вы можете просто обернуть вызов init внутри любой функции, которую вы используете для создания клонов.
Поскольку мои функции клонирования обычно копируют из скрытых элементов DOM, а не из видимых, у меня есть роскошь решать, нужно ли мне связывать до или после клонирования. Итак, сделайте #templateDiv скрытым элементом на вашей странице с элементом INPUT, который уже там.
mydiv = $('#templateDiv');
mydest = $('#someDiv');
function make_the_donuts() {
newDiv = myDiv.clone(true).insertAfter(mydest);
// attach datepickers by instance rather than by class
newDiv.find('input.datefield').datepicker();
}
и это в значительной степени делает это. Clone(true) всякий раз, когда вы можете,это избавит вас от головной боли в долгосрочной перспективе.
А как насчет изменения порядка?
mydiv = $('#someDiv');
// clone without the events and insert
newDiv = myDiv.clone(false).insertAfter(myDiv);
// datepicker won't re-init if this class is present
// not necessary anymore
// newDiv.find('.hadDatepicker').removeClass('hadDatepicker');
newDiv.find('input.datefield').datepicker();
// datepicker attached as a last step
mydiv.find('input.datefield').datepicker();
Честно говоря, я не знаю, как работает datepicker внутри. Я догадываюсь, что он хранит что-то в хранилище jQuery DOM. Давайте избегать его копирования любой ценой.
(Между этими строками кода может быть длинная бизнес-логика.Дело в том, чтобы создать резервную копию #someDiv, прежде чем добавлять на нее дату.)
У меня это работает с jQuery UI 1.7.2
var mydiv = $('#someDiv');
mydiv.find('input.datefield').datepicker();
var newDiv = mydiv.clone(false).attr("id", "someDiv2").insertAfter(mydiv);
newDiv.find('input.datefield')
.attr("id", "")
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker();
Проверьте http://jsbin.com/ahoqa3/2 для быстрая демонстрация
кстати. у вас, кажется, есть разные ошибки в коде вашего вопроса. Класс css - hasDatepicker , а не hadDatepicker , и однажды вы написали mydiv , а в следующий раз переменная - myDiv , которая не такой же.
Убедитесь, что ваш недавно клонированный datepicker имеет другое имя и идентификатор, чем оригинал. Если у них обоих одинаковые имена, то поведение, которое вы описываете, будет нормальным.
Попробуйте изменить последнюю строку на что-то вроде:
newDiv.find('input.datefield').attr('id', 'newDatePicker').attr('name', 'newDatePicker').datepicker();
просто сделайте
$('input.datefield').datepicker("destroy");
перед клонированием div. Затем после вставки клона снова привяжите datepicker
$('input.datefield').datepicker();
вроде бы "хакерское" решение, но оно отлично работает.