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

Ответ 1

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

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

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

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

Ответ 2

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

Я понял после многих поисков, что поля ввода ввода не имеют "id", они выглядели так:

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

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

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

добавив "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"));
            }
        });

Ответ 3

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

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

Ответ 4

Используйте

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

Он работает

Ответ 5

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

Во-первых, что вызывает проблему: JQuery присваивает datepicker идентификатору элемента. если вы клонируете элемент, то тот же идентификатор также может быть клонирован. который 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++;
});

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

Ответ 6

Используйте селектора jQuery:

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

Ответ 7

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

Ответ 8

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

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

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

Ответ 9

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

Ответ 10

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

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

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

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

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

Ответ 11

Если он все еще не работает, это из-за клонированного идентификатора. Вы можете полностью удалить datepicker следующим образом: $(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();

Ответ 12

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

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

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

hasDatepicker

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

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