Почему datepicker jQuery UI разрывается с динамическим DOM?

Я работаю с динамическим DOM здесь и вызвал jQuery UI datepicker ко всем входам с определенным именем класса, в этом случае .date

Он отлично работает с первой статической конструкцией, но когда я клонирую ее, обработчики событий, похоже, не хотят переходить. Я получаю ошибку Firebug:

inst не определено

Я попытался заглянуть в новый jQuery live() функция, но не удалось объединить два. Есть идеи?

31
dynamic-data jquery-ui

13 ответов

а, понял. Сразу после добавления HTML в DOM я запускаю это на всех входах, с которыми я хотел бы иметь datepicker. Datepicker добавляет класс к элементам, к которым он был присоединен, поэтому мы можем отфильтровать существующие входы и применить его только к новым.

$('.date').not('.hasDatePicker').datepicker();

Я надеюсь, что это поможет людям, поскольку я гуглил в течение нескольких дней и ничего не нашел!

вы также должны отметить, что было бы быстрее проверить input.date в новый созданный HTML, установив это как контекст, а не всю страницу, поскольку это сэкономит время, поскольку это более эффективная операция.

38

у меня была аналогичная проблема, у меня было несколько таблиц на странице, и у каждого было несколько datepickers, также при нажатии кнопки "AddLine" он добавил строку таблицы с динамическим HTML и datepicker.

я понял после большого поиска, что мои поля даты ввода не имели" id", определенные они выглядели так 

<input type="text" class="datepicker" name="mDate1" value="" size=8 >

jquery указывал все значения полей даты на самое первое поле даты, определенное на странице, календарь будет всплывать на всех полях даты, но значение 1st поле даты изменится, я внес изменения в html, как это 

<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >

добавив "id", и он начал работать, для динамических полей даты я меняю Id следующим образом

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"));
            }
        });
6

вам нужно использовать событие "live", чтобы заставить его работать с динамическим DOM. Итак, если класс для ваших входных данных datepicker является "вводом даты", следующий код заставит его работать:

$(document).ready(function() {
    $('.date-input').live('click', function() {
    $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
        });
});
4

это может быть немного поздно, но все вышеперечисленные предложения не сработали для меня, я придумал простое решение для этого.

во-первых, что вызывает проблему: JQuery назначает datepicker идентификатору элемента. если вы клонируете элемент, то тот же id также может быть клонирован. что не нравится jQuery. Вы можете получить ошибку нулевой ссылки или дату, назначенную первому полю ввода, независимо от того, какое поле ввода вы нажмете на.

устранение:

1) уничтожить datepicker 2) назначить новые уникальные идентификаторы для всех полей ввода 3) назначить datepicker для каждого входа

убедитесь, что ваш вход что-то вроде этого

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

прежде чем клонировать, уничтожить datepicker

$('.n1datepicker').datepicker('destroy');

после клонирования добавьте эти строки также

var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

и происходит волшебство

3

использовать 

$j(id or class).removeClass('hasDatepicker').datepicker();

Он работает

3

используйте селекторы jQuery:

$(".mydatepicker:not(.hasDatepicker)").datepicker()
2

несколько экземпляров библиотеки jQuery-ui на странице также вызовут эту ошибку. Удаление избыточных экземпляров работает для моего случая

1

Я испытал тот же симптом, в этом вызванный наличием td, содержащего элемент с тем же атрибутом id, что и вход,

 <td id="fld_xyz"><input id="fld_xyz" class="date" /></td>

Я знаю, что это не идеально, но стоит знать, что компонент datepicker, похоже, полагается на уникальность идентификатора.

0

У меня была эта проблема. Моя ситуация закончилась тем, что я был еще один элемент с таким же ID как вход в datepicker.

0

сегодня я столкнулся с той же проблемой... Я использую datetimepicker плагин в мое приложение.
Также используется стандартный datepicker jquery. Когда я когда-либо вызываю их обоих на готовом документе, я получаю ошибку inst is undefined.

    $(document).ready(function(){
        $(".datepickerCustom").datetimepicker();
        $(".datepicker").datepicker();
        $("#MainForm").validationEngine('attach');
        ....
    });

поэтому я изменил код для вызова перед готовым документом, как показано ниже:

    $(".datepickerCustom").datetimepicker();
    $(".datepicker").datepicker();
    $(document).ready(function(){
        $("#MainForm").validationEngine('attach');
        ....
    });

Теперь все работает нормально. Не проблема.

0

у меня была аналогичная проблема с сборщиком данных, не работающим после первого вызова. Я нашел ответ на свой вопрос здесь:

http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/

я клонировал разделы динамически из шаблона и непреднамеренно включал класс, который datepicker добавляет после его вызова:

hasDatepicker

Я разместил свой первый вызов datepicker после клонирования шаблона, и это сделало это. Затем я добавил datepicker вызов после каждого экземпляра clone:

$(source).clone().appendTo(destination).find(".datepicker").datepicker();
0

попробовав многие ответы здесь, это то, что сработало для меня и отображается при первом щелчке/фокусе

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

это нужно, что ваш вклад имеет класс 'mostrar_calendario'

live для JQuery 1.3+ для более новых версий вам нужно адаптировать это к"on"

подробнее о разнице здесь http://api.jquery.com/live/

0

если он все еще не работает, это из-за клонирования идентификатора. Вы можете полностью удалить datepicker следующим образом:

$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();
0