it-swarm.com.ru

установка datepicker () на динамически созданные элементы - JQuery/JQueryUI

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

$(".datepicker_recurring_start" ).datepicker();

Который будет работать только с первым текстовым полем, даже если все мои текстовые поля имеют класс datepicker_recurring_start.

Ваша помощь очень ценится!

108
steeped

вот трюк:

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

ДЕМО

Синтаксис $('...selector..').on('..event..', '...another-selector...', ...callback...); означает:
Добавьте слушателя к ...selector.. (body в нашем примере) для события ..event.. ('focus' в нашем примере). Для всех потомков совпадающих узлов, соответствующих селектору ...another-selector... (в нашем примере .datepicker_recurring_start), примените обработчик событий ...callback... (встроенная функция в нашем примере)

Смотрите http://api.jquery.com/on/ и особенно раздел о "делегированных событиях"

241
ilyes kooli

У меня ниже работает jquery:

изменение "тела" на документ

$(document).on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

Благодаря скафандри

Примечание: убедитесь, что ваш идентификатор отличается для каждого поля

38
Tapash

Отличный ответ от скафандри +1

Это просто обновлено, чтобы проверить класс hasDatepicker.

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});
13
pleshy

Убедитесь, что ваш элемент с классом .date-picker НЕ имеет класса hasDatepicker. Если это произойдет, даже попытка повторной инициализации с помощью $myDatepicker.datepicker(); потерпит неудачу! Вместо этого вам нужно сделать ...

$myDatepicker.removeClass('hasDatepicker').datepicker();
11
wintondeshong

Вам нужно снова запустить .datepicker(); после того, как вы динамически создали другие элементы текстового поля. 

Я бы порекомендовал сделать это в методе обратного вызова, который добавляет элементы в DOM.

Допустим, вы используете метод Load JQuery для извлечения элементов из источника и загрузки их в DOM, вы должны сделать что-то вроде этого:

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});
5
Tr1stan

Новый метод для динамических элементов - 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
});
1
Hady Shaltout

Это то, что у меня работает на 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+ для более новых версий, вам нужно адаптировать это к "on"

Узнайте больше о разнице здесь http://api.jquery.com/live/

0
Mauricio Gracia Gutierrez

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

Вот что наконец сработало:

$(document).on('changeDate',"#elementid", function(){
    alert('event fired');
});

Надеюсь, что это кому-то поможет, потому что это немного отбросило меня.

0
Chris

Я изменил ответ @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);
});

вот рабочая демонстрация

0
c0x6a

вы можете добавить класс .datepicker в функцию javascript, чтобы иметь возможность динамически изменять тип ввода

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });
0
Nada N. Hantouli
$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});
0
Siya Qalistic