Установка datepicker() на динамически создаваемые элементы - JQuery/JQueryUI
У меня есть динамически созданные текстовые поля, и я хочу, чтобы каждый из них мог отображать календарь по клику. Код, который я использую:
$(".datepicker_recurring_start" ).datepicker();
Это будет работать только в первом текстовом поле, хотя все мои текстовые поля имеют класс datepicker_recurring_start.
Ваша помощь очень ценится!
Ответы
Ответ 1
вот трюк:
$('body').on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
DEMO
Синтаксис $('...selector..').on('..event..', '...another-selector...', ...callback...);
:
Добавьте слушателя в ...selector..
(body
в нашем примере) для события ..event..
( "focus" в нашем примере). Для всех потомков совпадающих узлов, которые соответствуют селектору ...another-selector...
(.datepicker_recurring_start
в нашем примере), примените обработчик событий ...callback...
(встроенная функция в нашем примере)
Смотрите http://api.jquery.com/on/ и особенно раздел о делегированных событиях
Ответ 2
Для меня ниже jquery работал:
изменение "тела" на документ
$(document).on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
Благодаря skafandri
Примечание. Убедитесь, что ваш идентификатор отличается для каждого поля.
Ответ 3
Отличный ответ skafandri +1
Это просто обновлено, чтобы проверить класс hasDatepicker.
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker();
}
});
Ответ 4
Убедитесь, что ваш элемент с классом .date-picker
НЕ имеет класса hasDatepicker
. Если это произойдет, попытка повторной инициализации с помощью $myDatepicker.datepicker();
не удастся! Вместо этого вам нужно сделать...
$myDatepicker.removeClass('hasDatepicker').datepicker();
Ответ 5
Вам нужно запустить .datepicker();
снова после того, как вы динамически создали другие элементы текстового поля.
Я бы рекомендовал сделать это в методе обратного вызова для вызова, который добавляет элементы в DOM.
Итак, скажем, вы используете метод JQuery Load для извлечения элементов из источника и загрузки их в DOM, вы бы сделали что-то вроде этого:
$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
$(".datepicker_recurring_start" ).datepicker();
});
Ответ 6
Новый метод для динамических элементов MutationsObserver.. В следующем примере используется underscore.js для использования функции (_.each).
MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {
_.each(repeaterWrapper, function (repeaterItem, index) {
var jq_nodes = $(repeaterItem.addedNodes);
jq_nodes.each(function () {
// Date Picker
$(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
dateFormat: "dd MM, yy",
showAnim: "slideDown",
changeMonth: true,
numberOfMonths: 1
});
});
});
});
observerjQueryPlugins.observe(document, {
childList: true,
subtree: true,
attributes: false,
characterData: false
});
Ответ 7
Ни один из других решений не работал у меня. В моем приложении я добавляю элементы диапазона дат в документ, используя jquery, а затем применяю datepicker к ним. Поэтому ни один из решений для событий не работал по какой-то причине.
Вот что наконец-то сработало:
$(document).on('changeDate',"#elementid", function(){
alert('event fired');
});
Надеюсь, это поможет кому-то, потому что это немного меня отбросило.
Ответ 8
вы можете добавить класс .datepicker в функцию javascript, чтобы иметь возможность динамически изменять тип ввода
$("#ddlDefault").addClass("datepicker");
$(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });
Ответ 9
Я изменил ответ @skafandri, чтобы избежать повторного применения конструктора datepicker
ко всем входам с классом .datepicker_recurring_start
.
Здесь HTML:
<div id="content"></div>
<button id="cmd">add a datepicker</button>
Здесь JS:
$('#cmd').click(function() {
var new_datepicker = $('<input type="text">').datepicker();
$('#content').append('<br>a datepicker ').append(new_datepicker);
});
здесь рабочая демонстрация
Ответ 10
Это то, что работает для меня в JQuery 1.3 и показывает первый щелчок/фокус
function vincularDatePickers() {
$('.mostrar_calendario').live('click', function () {
$(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
});
}
для этого необходимо, чтобы ваш ввод имел класс "mostrar_calendario"
Live для JQuery 1. 3+ для более новых версий вам нужно адаптировать это к "вкл"
Подробнее о разнице здесь http://api.jquery.com/live/
Ответ 11
$( ".datepicker_recurring_start" ).each(function(){
$(this).datepicker({
dateFormat:"dd/mm/yy",
yearRange: '2000:2012',
changeYear: true,
changeMonth: true
});
});
Ответ 12
Вот что у меня сработало (с помощью jquery datepicker):
$('body').on('focus', '.datepicker', function() {
$(this).removeClass('hasDatepicker').datepicker();
});