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

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

У меня была похожая проблема, у меня было несколько таблиц на странице, и у каждой было несколько средств выбора даты, также при нажатии кнопки «AddLine» добавлялась строка таблицы с динамическим HTML и датчиком даты.

После многих поисков я понял, что в моих полях даты ввода не было идентификатора "id", они выглядели так:

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

jquery указывал все значения полей даты на самое первое поле даты, определенное на странице, календарь появлялся на всех полях даты, но значение первого поля даты изменялось, я сделал 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"));
            }
        });

Answer 3

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

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

Решение:

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

Убедитесь, что ваш ввод примерно такой

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

Прежде чем клонировать, уничтожьте сборщик дат

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

После того, как вы клонируете, добавьте также эти строки

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

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

Answer 4

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

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

Answer 5

Использование

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

Работает

Answer 6

Использовать селекторы jQuery:

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

Answer 7

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

Answer 8

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

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/

Answer 9

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

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

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

hasDatepicker

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

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

Answer 10

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

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