У меня есть динамически созданные текстовые поля, и я хочу, чтобы каждое из них могло отображать календарь при нажатии. Я использую следующий код:
$(".datepicker_recurring_start" ).datepicker();
Это будет работать только с первым текстовым полем, хотя все мои текстовые поля имеют класс с именем datepicker_recurring_start.
Ваша помощь очень ценится!
javascript
jquery
jquery-ui
datepicker
погруженный
источник
источник
Ответы:
вот трюк:
DEMO
В
$('...selector..').on('..event..', '...another-selector...', ...callback...);
синтаксических средств:Добавить слушателя
...selector..
(body
в нашем примере) для события..event..
( «фокус» в нашем примере). Для всех потомков совпадающих узлов, которые соответствуют селектору...another-selector...
(.datepicker_recurring_start
в нашем примере), примените обработчик событий...callback...
(встроенная функция в нашем примере)См. Http://api.jquery.com/on/ и особенно раздел о «делегированных событиях».
источник
.datapicker()
каждый раз, когда текстовое поле получает фокус, поэтому вы должны быть осторожны с этим подходом (при условии, что я правильно это читаю). Однако я думаю, что вы будете в порядке,.datapicker()
потому что он, вероятно, проверит, создан ли datepicker, прежде чем пытаться воссоздать. С другим кодом у вас может не быть этой изящества. Кроме того, .on (представлен только в JQuery 1.7, поэтому убедитесь, что вы используете правильную версию.:not(.hasDatepicker)
Для меня ниже работал jquery:
изменение "тела" на документ
Спасибо скафандри
Примечание: убедитесь, что ваш идентификатор отличается для каждого поля
источник
Отличный ответ скафандри +1
Он обновлен только для проверки наличия класса hasDatepicker.
источник
$('body').on('focus',".datepicker:not(.hasDatepicker)", function(){$(this).datepicker();});
?Убедитесь, что у вашего элемента с
.date-picker
классом еще нетhasDatepicker
класса. Если это произойдет, даже попытка повторной инициализации с помощью$myDatepicker.datepicker();
не удастся! Вместо этого вам нужно сделать ...источник
Вам нужно запустить
.datepicker();
снова после того, как вы динамически создали другие элементы текстового поля.Я бы рекомендовал сделать это в методе обратного вызова вызова, который добавляет элементы в DOM.
Допустим, вы используете метод JQuery Load для извлечения элементов из источника и загрузки их в DOM, вы бы сделали что-то вроде этого:
источник
Новый метод для динамических элементов - MutationsObserver .. В следующем примере используется underscore.js для использования функции (_.each).
источник
Это то, что сработало для меня (с использованием jquery datepicker):
источник
Ни одно из других решений не помогло мне. В моем приложении я добавляю в документ элементы диапазона дат с помощью jquery, а затем применяю к ним datepicker. Так что ни одно из событийных решений почему-то не сработало.
Вот что в итоге сработало:
Надеюсь, это кому-то поможет, потому что это немного отбросило меня назад.
источник
вы можете добавить класс .datepicker в функцию javascript, чтобы иметь возможность динамически изменять тип ввода
источник
Я изменил ответ @skafandri, чтобы избежать повторного применения
datepicker
конструктора ко всем входам с.datepicker_recurring_start
классом.Вот HTML:
Вот JS:
вот рабочая демонстрация
источник
Это то, что сработало для меня в JQuery 1.3 и отображается при первом щелчке / фокусе
для этого необходимо, чтобы ваш ввод имел класс mostrar_calendario
Live предназначен для JQuery 1.3+, для более новых версий вам необходимо адаптировать это к "on"
Подробнее о разнице можно узнать здесь http://api.jquery.com/live/
источник
источник